Vue 2参考手册
指南 | Guide
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"
v-bind:true-value="a"
v-bind:false-value="b"
>
// when checked:
vm.toggle === vm.a
// when unchecked:
vm.toggle === vm.b
Radio
<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
!要了解更多信息,请阅读“组件”指南中的自定义输入。
指南 | Guide相关
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主页 | https://vuejs.org/ |
源码 | https://github.com/vuejs/vue |
版本 | 2 |
发布版本 | 2.5.2 |