vue + iview 中 Input 与 input 的 change 事件区别
转自:https://blog.csdn.net/yiifaa/article/details/524521531、vue + input<label>input:</label><input type="text" v-model="message" placeholder="Hello" /><span>{{message}...
转自: https://blog.csdn.net/yiifaa/article/details/52452153
1、vue + input
<label>input:</label>
<input type="text" v-model="message" placeholder="Hello" />
<span>{{message}}</span>
blur与change事件在绝大部分的情况下表现都非常相似,输入结束后,离开输入框,会先后触发change与blur,唯有两点例外。
1. 1、没有进行任何输入时,不会触发change
在这种情况下,输入框并不会触发change事件,但一定会触发blur事件。在判断表单的修改状态时,这种差异会非常有用,通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。
1.2、 输入后值并没有发生变更
这种情况是指,在没有失焦的情况下,在输入框内进行返回的删除与输入操作,但最终的值与原值一样,这种情况下,keydown、input、keyup、blur都会触发,但change依旧不会触发。
1.3、v-model时:
input 输入时,message 立即同步。
1.4、v-model.lazy 时:
input 输入时,message 并不立即同步,当 input 失去焦点时,才会同步。
添加 lazy
修饰符,从而转变为使用 change
事件进行同步,也就是延迟。
2、vue + iview + Input
iview 中 Input 组件, on-change 事件 是 数据改变时触发, 与原生 input 标签中 change 事件不同。
<Input v-model="skuTableBatchField.value"
@on-blur="tableBatchBlur"
@on-change="tableBatchChange"
/>
更多推荐
所有评论(0)