Vue學習之路（四）---v-model（雙向數據綁定）與表單

v-model具有雙向數據綁定的功能，可以綁定數組和字符串，不過，在綁定之前，需要將我們需要綁定的數據進行初始化。
1.當輸入框的值改變時，{{value}}中的值會跟着改變

//html
 <input type="text" v-model="value" value="apple"/>
    {{value}}
//data
data () {
  value: ''
}

2.input爲checkbox時，點擊勾選框，v-model會自動將value值添加到valueArr中

//html
 <input type="checkbox" v-model="valueArr" value="apple"/>
 <input type="checkbox" v-model="valueArr" value="orange"/>
 <input type="checkbox" v-model="valueArr" value="banana"/>{{valueArr}}
//data
data () {
  valueArr: []
}

結果圖

3.當input爲單選按鈕時
v-model會獲取當前一個value或者valueArr的值，然後渲染到頁面中

    <input type="radio" v-model="value" value="apple"/>
    <input type="radio" v-model="value" value="orange"/>
    <input type="radio" v-model="value" value="banana"/>{{value}}

結果圖

4.v-model中的修飾符
v-model.lazy: 是在輸入完成或者失去焦點或者回車之後執行
v-model.trim: 去掉輸入框的中的空格
v-model.number: 當輸入的是‘11111’，會value自動轉變爲number類型