VUE學習六，表單和應用雙向繫結v-model
阿新 • • 發佈：2021-07-07
Vue 還提供了v-model指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。
一、示範程式碼
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
二、效果如下圖
更改input中的值，頁面跟著改變：
三、整體程式碼
<!DOCTYPE HTML> <View Codehtml> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE簡單示範</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <!--v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。//--> <divid="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script> </body> </html>
本文參考：
https://cn.vuejs.org/v2/guide/