10. Form Input Bindings（表单输入绑定）
基本用法
您可以使用该v-model指令在表单输入和textarea元素上创建双向数据绑定。它会根据输入类型自动选择更新元素的正确方法。虽然有点神奇，但v-model实质上是用于更新用户输入事件数据的语法糖，以及对某些边缘案例的特殊照顾。
v-model将忽略初始value，checked或selected任何形式的元素中找到的属性。它始终将Vue实例数据视为真相的来源。您应该data在组件选项中声明JavaScript端的初始值。
对于需要IME（中文，日文，韩文等）的语言，您会注意到v-model在IME撰写期间没有更新。如果您想要迎合这些更新，请改用input事件。
Text
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>textareas（<textarea>{{text}}</textarea>）上的插值将不起作用，改为使用v-model。
复选框
单个复选框，布尔值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>绑定到相同数组的多个复选框：
<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: []
}
})Radio
<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 disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: ''
}
})如果v-model表达式的初始值与任何选项都不匹配，则该<select>元素将呈现“未选中”状态。在iOS上，这会导致用户无法选择第一个项目，因为在这种情况下iOS不会触发更改事件。因此，建议使用空值提供禁用选项，如上例所示。
多选（绑定到数组）：
<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' }
]
}
})数据绑定
对于Radio，复选框和选择选项，v-model绑定值通常是静态字符串（或复选框的布尔值）：
<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">
<!-- `selected` is a string "abc" when selected -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>但有时我们可能想要将值绑定到Vue实例上的动态属性。我们可以用它v-bind来实现这一点。另外，使用v-bind允许我们将输入值绑定到非字符串值。
复选框 <input type="checkbox" v-model="toggle" true-value="a" false-value="b" >
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b"
>// when checked:
vm.toggle === vm.a
// when unchecked:
vm.toggle === vm.bRadio
<input type="radio" v-model="pick" v-bind:value="a">// when checked:
vm.pick === vm.a选择选项
<select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>// when selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123修饰符
.lazy
默认情况下，v-model在每个input事件之后将输入与数据同步（除了上述IME组成外）。您可以添加lazy修饰符，以在change事件之后实现同步：
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" >.number
如果您希望用户输入自动作为数字进行类型转换，您可以将number修饰符添加到您的v-model托管输入中：
<input v-model.number="age" type="number">这通常很有用，因为即使是type="number"，HTML输入元素的值总是返回一个字符串。
.trim
如果您希望自动修剪用户输入，则可以将trim修饰符添加到v-model托管输入中：
<input v-model.trim="msg">带有组件的v-model
如果你还不熟悉Vue的组件，你可以暂时忽略它。
HTML内置的输入类型并不总是满足您的需求。幸运的是，Vue组件允许您构建具有完全自定义行为的可重用输入。这些输入甚至可以与v-model一起使用！要了解更多信息，请阅读“组件”指南中的自定义输入。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
