v-model的常用修饰符有以下几种
- lazy
- number
- trim
- debounce(在Vue2.0后被移除)
.lazy
在默认情况下,v-model
在input事件中同步输入框的值与数据。
如xxx链接所示。
在添加了lazy之后,会把 oninput
事件改成 onchange
事件。
<input type="text" v-model.lazy="msg">
.number
number
修饰符会把 v-model
的值转换成数值类型。
<input type="text" v-model.number="msg">
.trim
trim
的作用是过滤用户输入时首尾的空格字符。
<input type="text" v-model.trim="msg">
.debounce
设置一个最小的延时,在每次输入之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作(例如,在输入提示中的AJAX请求)时,它比较有用。
但实际上,这是控制了状态更新的频率,而不是控制高耗时任务本身。这是个微小的差别,但是会随着应用增长而显现出局限性。
所以在Vue2.0之后就被移除了。
<input type="text" v-model="msg" debounce="500">