Vue.js v-model

• Vue template

v-model

表單和畫面"雙向綁定" : 資料影響畫面，畫面影響資料。

表單資料:

情境像是，輸入框 <input type="text"> 或 勾選完成 <input type="checkbox">。

、

語法功能: 畫面更新，同時更新vue資料。

1. 在vue template的目標HTML tag內加入 v-model="屬性名稱"
2. 在vue 實例 data中，定義屬性的資料(沒有內容，空字串即可)

   data: {
   屬性名稱: " ",
   }
   

屬性名稱皆相同，即完成雙向綁定。在Devtool-VUE中確認。

v-model 會忽略HTML元件的value、checked或selected屬性的初始值。
v-model 而會以Vue實例中data的設定值為來源。
v-model對不同的input元素，內部使用不同屬性會引起不同事件。
text &　textarea 使用value屬性和input事件。
checkbox & radiobutton 使用checked屬性和change事件。
select fields使用value屬性和change事件。