表单控件绑定
1.基础用法
你可以用 v-model
指令在表单控件元素上创建双向数据绑定。尽管有些神奇,但 v-model
本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
1.1文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
1.2复选框
单个勾选框,逻辑值:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
1.3单选按钮
<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>
1.4选择列表
单选列表:
<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' }
]
}
})
2.绑定value
对于单选按钮,勾选框及选择列表选项,
v-model
绑定的 value 通常是静态字符串(对于勾选框是逻辑值),但是有时想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind
实现,并且这个属性的值可以不是字符串。2.1复选框
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b"
>
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b
2.2单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a
2.3选择列表
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
3.修饰符
3.1 .lazy
在默认情况下,
v-model
在 input
事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符lazy
,从而转变为在 change
事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
3.2 .number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符
number
给 v-model
来处理输入值:<input v-model.number="age" type="number">3.3 .trim
如果要自动过滤用户输入的首尾空格,可以添加
trim
修饰符到 v-model
上过滤输入:<input v-model.trim="msg">