v-model是就是双向绑定 , 是vue区别于react的最伟大的发明与创造 , 底层原理构造太复杂 , 所以了解他的特性以及使用就显得更为必要.
v-model指令在表单上对数据进行双向绑定,会自动正确的方法来更新元素.
v-model会忽略所有表单元素value , checked ,selected Attribute的初始值而总是将vue的实例的数据作为数据来源.应该通过JavaScript在数组中的data选项中声明初始值.
v-model在内部输入不同的property并抛出不同事件.
在文本域中插值(< textarea >{{text}}< /textarea >并不会生效,应该用v-model来代替.
<textarea v-model="message" placeholder="add multiple lines"></textarea>
如果v-model表达式的初始值未能匹配任何值任何选项 , < select >元素将会渲染为未选中状态 , 在iOS中,这时会使用户无法选择第一个选项 ,因为这个状态下, iOS不会触发change事件 . 因此 ,应使用一个值为空的禁用选项.
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div> //单选时
new Vue({
el: '...',
data: {
selected: ''
}
})
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div> //多选时
new Vue({
el: '#example-6',
data: {
selected: []
}
})
