在vue中我們可以通過v-model來為表單元素實現雙向綁定
1:v-model指令
數據的雙向綁定
雙向綁定是說我們不僅僅可以通過數據（M）的改變去影響視圖（V），還是當視圖的內容改變（V）去影響模型中的數據（M）
通常來說雙綁定應用在表單中比較多
指令： vue對html元素拓展是一些屬性名稱（自定義屬性名稱）
Vue指令有個特點，都是以v-開頭的
V-model，它提供了一個js環境，在他的屬性之中我們可以使用js（vue實例化對象）中的變量，將表單元素的值與vue實例化對象中是數據屬性同步，實現視圖到模型中的數據的一個綁定，因此在表單元素上添加了v-model就實現一種雙向綁定
<div id="app">
<input type="text" v-model="msg">
<h1>{{msg }}</h1>
</div>
var myData = {
// 插入的文本
msg: ''
};
// 創建vue對象
var app = new Vue({
el: '#app',
data: myData
})
//實現了input輸入內容和h1的雙向綁定
2：單選或者多選
它不允許我們輸入，只允許我們點擊是否被選中
元素屬性（checked）的優先級要高於vue實例化對象中數據屬性值（適用於所有表單元素）
（1）多選
將checkbox的值寫入一個變量中，變量中的每一個屬性對應一個checkbox的值
當值是false，多選框不會被選中
注意：在判斷值會做類型轉換（0 ‘’， null， undefined， NaN， false）都是false
當值是true，多選框會被選中
Eg:
<label>S<input type="checkbox" v-model="size.S"></label>
<label>M <input type="checkbox" v-model="size.M" ></label>
<label>L <input type="checkbox" v-model="size.L"></label>
<label><input type="checkbox" v-model="size.XL" v-bind:true-value="big" v-bind:false-value="'small'"></label> //'small'是字符串 big變量
<p>{{size | json}}</p> //json對象數據轉化成一個json字符串
var app = new Vue({
el: 'div',
data: {
size: {
S: false,
M: false,
L: '',
XL: '' //// 我們希望XL不是一個boolean值
}
}，
computed: {
big: function () {
return 'is big'
}
}
})
當選框框值不想設置為boolean的時候，我們可以通過綁定true-value和false-value來定義
V-bind:true-value 選中時候的值
V-bind:false-value 沒有選中時候的值
如果值是變量會去vue實例化對象中尋找數據（包含動態數據（優先）對象或者靜態數據對象）
（2）單選
定義單選時候，我們要添加統一的同一個變量名稱，這個變量會保存單選的選中元素。
單選要設置value值，這里的值會保留v-model的變量屬性中
<label>男<input type="radio" v-model="sex" value="man" ></label>
<label>女<input type="radio" v-model="sex" value="woman"></label>
<p>{{sex}}</p>
var app = new Vue({
el: 'div',
data: {
sex: '' //未選中任何。為空
//man 默認選中man
}
})
（3）下拉框
在vue中定義下拉框，在select上多了一個v-model屬性
如果想實現多選，select添加multiple屬性
可以為option添加value屬性，此時選中該選項的時候，獲取的值就是value，如果不設置value默認使用的是option中的內容值
設置默認選中時，我們可以通過在vue實例化對象中綁定數據中定義，
如果是單選直接寫上單選的值 email: ‘126’
如果是多選，我們可以將這些值寫在一個數組中 email: [126,'sina']
vue中下拉框中每個選項是重復的，可以通過v-for來動態的渲染元素
Eg:
<p>{{email}}</p>
<select v-model="email" >
<option value="126">@126.com</option>
<option value="163">@163.com</option>
</select>
var app = new Vue({
el: 'div',
data: {
// 表示下拉框中選中的元素的值
email: ‘’
}
})
Eg;
<select v-model="email">
<option v-for="item in emails" value="item">
<template v-if="item == 'yeah'">@{{item}}.net</template>
<template v-if="item != 'yeah'">@{{item}}.com</template>
</option>
</select>
emails: [126, 163, 'sina', 'sohu', 'yeah', 139]
Eg:
<select v-model="email">
<option v-for="item in emails" selected="{{item.checked}}">
<template v-if="item == 'yeah'">@{{item.value}}.net</template>
<template v-if="item != 'yeah'">@{{item.value}}.com</template>
</option>
</select>
emails: [
{
value: 163,
checked: false
},
{
// 默認'sina'是被選中
value: 'sina',
checked: true
},
{
value: 'sohu',
checked: false
}
]
3:表單元素的特性
debounce 當輸入完畢等待參數值時候，再進行數據的綁定。單位是毫秒
Lazy 做了失去焦點操作，當表單元素失去焦點時候，才會做數據的綁定
1<input type="text" debounce="1000" v-model="msg">
2<input type="text" lazy v-model="msg">