基礎用法
你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，并特別處理一些極端的例子。
v-model 并不關心表單控件初始化所生成的值。因為它會選擇 Vue 實例數據來作為具體的值。
對于需要輸入法編輯器的語言（中文、日文、韓文等），要注意的是，在 IME 字母組合窗口輸入時 v-model 并不會更新。如果你想在此期間滿足更新需求，請使用 input 事件。
# 文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
#多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
在文本區域插值( <textarea></textarea> ) 并不會生效，應用 v-model 來代替
# 復選框
單個勾選框，邏輯值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多個勾選框，綁定到同一個數組：
<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>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
# 單選按鈕
<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>
# 選擇列表
單選列表：
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
多選列表（綁定到一個數組）：
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
動態選項，用 v-for 渲染：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
綁定value
對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對于勾選框是邏輯值）：
<!-- 當選中時，`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 當選中時，`selected` 為字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，并且這個屬性的值可以不是字符串。
# 復選框
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b"
>
// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b
# 單選按鈕
<input type="radio" v-model="pick" v-bind:value="a">
// 當選中時
vm.pick === vm.a
# 選擇列表設置
<select v-model="selected">
<!-- 內聯對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當選中時
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
修飾符
# .lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據 (除了 上述 IME 部分)，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
# .number
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">
這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。
# .trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
