可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
用 v-model 來實現vue的雙向數據綁定，只允許在表單控件中使用。
v-model 在內部使用不同的屬性為不同的輸入元素並拋出不同的事件：
-
text 和 textarea 元素使用
value屬性和input事件； -
checkbox 和 radio 使用
checked屬性和change事件； -
select 字段將
value作為 prop 並將change作為事件。
一、基礎用法
1、單行文本——input
對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。
<body>
<div id="app">
<input type="text" name="" v-model="msg">
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'alex'
}
})
</script>
</body>
在表單中輸入什么信息，下面就顯示相應的信息。顯示效果如下所示：
2、多行文本——textarea
<body>
<div id="app">
<span>Multiline message is:</span>
<p style="white-space: pre-line">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'sadwad'
}
})
</script>
</body>
顯示效果如下所示：
3、復選框
（1）單個復選框，綁定到布爾值
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: []
}
})
</script>
</body>
原本顯示false，點擊方框后切換為true，顯示效果如下所示：
（2）多個復選框，綁定到同一個數組
<body>
<div id="app">
<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>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>
顯示效果如下：
4、單選按鈕
<body>
<div id="app">
<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>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
顯示效果如下：
5、選擇框
（1）單選情況
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
顯示效果如下：
如果 v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。
（2）多選情況（綁定到一個數組）
<body>
<div id="app">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected: []
}
})
</script>
</body>
顯示效果如下所示：
（3）v-for 渲染的動態選項
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A'},
{ text: 'Two', value: 'B'},
{ text: 'Three', value: 'C'}
]
}
})
</script>
</body>
顯示效果如下所示：
二、值綁定
對於單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對於復選框也可以是布爾值)：
<!-- 當選中時，`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>
顯示效果如下所示：
但是有時我們可能想把值綁定到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字符串。
1、復選框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
頁面上出現一個選擇框，沒有點選時，toggle的值為‘no’；點選時，toggle的值為'yes'。
這里的 true-value 和 false-value 特性並不會影響輸入控件的 value 特性，因為瀏覽器在提交表單時並不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。
2、單選按鈕
3、選擇框的選項