当前位置: 首页 > 工具软件 > jQuery iview > 使用案例 >

vue + iview 中 Input 与 input 的 change 事件区别

终翰学
2023-12-01

转自: 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"
/>

 

 类似资料: