<select v-model="selected">
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>new Vue({
el:"....",
data:{
selelcted:"A"
}
})
规则:v-model绑定的变量值如果等于option元素其中一个value值,那么该元素会被选中。同时如果选中某个option元素,那么该元素的value值就会被赋给该变量。
如上,初始this.selected为”A”,在编译到第二个option时,因为属性为selected表示选中,该元素text值为”B”(如果option有value值,会优先value值),所以this.selected值为”B”。编译结束后,this.slected值为”B”,页面最终渲染效果为第二个被选中。如果是可多选select下拉框,规则基本同checkbox的规则2
属性基本用法
lazy
在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,input值发生改变时,不会同步到绑定的变量
<input type="text" v-model="msg" lazy>//input值发生改变,msg不变number
如果想自动将用户的输入转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个特性 number:
<input v-model=”age” number>//默认输入框内的值为字符串,添加number,可以将输入值转换为数字在同步到age
debounce
设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用.
<input v-model="msg" debounce="500">//输入内容0.5秒后同步到msgvm.$watch({
'msg':function(val,oldval){
}
})
注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据(所以不适合ajax请求事件)。因此在使用debounce 时应当用 vm.$watch() 响应数据的变化。
若想延迟 DOM 事件,应当使用debounce过滤器。
debounce过滤器
<input @keyup=”onKeyup | debounce 500″>//只要操作键盘间隔小于0.5秒,就不会发生onKeyup事件。
包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms, 如果在延迟结束前再次调用,延迟时长重置为 x ms。
用此过滤器非常适合做ajax请求










