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

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