v-model 并不關(guān)心表單控件初始化所生成的值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來作為具體的值。
文本區(qū)綁定v-model發(fā)方法:
<textarea v-model="message" placeholder="add multiple lines"></textarea>
多個(gè)勾選框,綁定到同一個(gè)數(shù)組:
<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>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
對(duì)于單選按鈕,勾選框及選擇列表選項(xiàng), v-model 綁定的 value 通常是靜態(tài)字符串(對(duì)于勾選框是邏輯值):
修飾符:
在默認(rèn)情況下, v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分),但你可以添加一個(gè)修飾符 lazy ,從而轉(zhuǎn)變?yōu)樵?change 事件中同步:
<input v-model.lazy="msg" >
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型(如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值),可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值:
<input v-model.number="age" type="number">
這通常很有用,因?yàn)樵?type="number" 時(shí) HTML 中輸入的值也總是會(huì)返回字符串類型。
<input v-model.trim="msg">
.trim: 自動(dòng)過濾用戶輸入的首尾空格