Vue.js教程（六）：v-model表單操作
阿新 • • 發佈：2019-02-08
v-model和v-bind有點類似，都是用來繫結標籤屬性的。但是v-model是表單控制元件操作，在其他標籤是不好使。
簡介
v-model是用來配合表單控制元件實現文字實時顯示的效果（雙向繫結效果）。
v-model基本使用
如下程式碼效果，修改了表單中的內容，p標籤中的內容隨著input輸入框內容的變化而變化。
<!DOCTYPE html> <html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>表單雙向繫結</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-6"> <p>{{ message }}</p> <!--這裡是重點--> <input v-model:value="message"> </div> <script type="text/javascript"> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script> </body> </html>
v-bind和v-model雖然都是動態設定屬性的。但是v-model配合表單雙向繫結效果。
學習前端最好的方式就是動手用一用，效果出來了就明白了。