基礎(chǔ)用法
你可以用 v-model 指令在表單<input>、<textarea>及 <select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇，但 v-model本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。
v-model 會(huì)忽略所有表單元素的 value、checked、selected特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項(xiàng)中聲明初始值。也就是說在有data中的值為初始值的情況下，原先標(biāo)簽上的內(nèi)容忽視。
對(duì)于需要使用輸入法 (如中文、日文、韓文等) 的語言，你會(huì)發(fā)現(xiàn) v-model 不會(huì)在輸入法組合文字過程中得到更新。如果你也想處理這個(gè)過程，請(qǐng)使用 input 事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
此時(shí) input 中的內(nèi)容和 message中的是互相雙向綁定的。
多行文本
使用方法一致
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
在文本區(qū)域插值 (<textarea></textarea>) 并不會(huì)生效，應(yīng)用 v-model 來代替。
復(fù)選框
//單個(gè)復(fù)選框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
//多個(gè)復(fù)選框
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
單選按鈕
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
選擇框
<div id="example-5">
<select v-model="selected">
<option disabled value="">請(qǐng)選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
當(dāng)select中為空的時(shí)候，下拉框?yàn)檎?qǐng)選擇，可以給他添加option中的文本，充當(dāng)默認(rèn)值。
果 v-model 表達(dá)式的初始值未能匹配任何選項(xiàng)，<select>元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會(huì)使用戶無法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會(huì)觸發(fā)change 事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。
如果下拉框進(jìn)行多選，則吧select的值在data中綁定到一個(gè)空數(shù)組即可
new Vue({
el: '#example-6',
data: {
selected: []
}
})
值綁定
復(fù)選框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
result:{{toggle}}
這里綁定的屬性值，則是使用 yes 替換原本的true。
這里的 true-value 和 false-value 特性并不會(huì)影響輸入控件的 value 特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。如果要確保表單中這兩個(gè)值中的一個(gè)能夠被提交，(比如“yes”或“no”)，請(qǐng)換用單選按鈕。
單選按鈕
<input type="radio" v-model="pick" v-bind:value="a">
// 當(dāng)選中時(shí)
vm.pick === vm.a
######### 選擇框的選項(xiàng)
<select v-model="selected">
<!-- 內(nèi)聯(lián)對(duì)象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當(dāng)選中時(shí)
typeof vm.selected // => 'object'
vm.selected.number // => 123
修飾符
.lazy (將輸入框的響應(yīng)轉(zhuǎn)變?yōu)?change事件)
在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 (除了上述輸入法組合文字時(shí))。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：
<!-- 在“change”時(shí)而非“input”時(shí)更新 -->
也就是失去焦點(diǎn)時(shí)
<input v-model.lazy="msg" >
.number（將用戶的輸入值轉(zhuǎn)為數(shù)值類型）
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)化為數(shù)字類型，可以給v-model添加.number的修飾符
<input v-model.number="age" type="number">
這樣的修飾符，會(huì)在用戶輸入 非數(shù)字的情況下禁止用戶輸入。
這通常很有用，因?yàn)榧词乖?type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。
.trim(自動(dòng)過濾用戶輸入的首尾空白字符)
如果要自動(dòng)過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
在組件上使用 v-model
HTML 原生的輸入元素類型并不總能滿足需求。幸好，Vue 的組件系統(tǒng)允許你創(chuàng)建具有完全自定義行為且可復(fù)用的輸入組件。這些輸入組件甚至可以和 v-model 一起使用！要了解更多，請(qǐng)參閱組件指南中的自定義輸入組件。
