基礎(chǔ)用法

你可以用v-model指令在表單input，textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但是v-model本質(zhì)上不過(guò)是語(yǔ)法糖。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)。

v-model會(huì)忽略所有表單元素的value, checked, selected特性的初始值而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò)JavaScript在組件的data選項(xiàng)中聲明初始值。

(1) 文本

<input v-model="message" placehoder="edit me">

(2) 多行文本

<textarea v-model="message"></textarea>

(3) 復(fù)選框

單個(gè)復(fù)選框，綁定到布爾值：

<input type="checkbox" v-model="checked">

多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組：

<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: [] }})

(4) 單選按鈕

<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: '' }})

(5) 選擇框

單選時(shí)：

<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: '' }})

如果 v-model 表達(dá)式的初始值未能匹配任何選項(xiàng)，<select> 元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會(huì)使用戶無(wú)法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會(huì)觸發(fā) change 事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。

多選時(shí)（綁定到一個(gè)數(shù)組）

<div id="example-6"> <select v-model="selected" multiple style="width: 50px;">  <option>A</option>  <option>B</option>  <option>C</option> </select> <br> <span>Selected: {{ selected }}</span></div>new Vue({ el: '#example-6', data: {  selected: [] }})