vue项目input标签checkbox，change和click绑定事件的区别

vue项目input标签checkbox，change和click绑定事件的区别

glorydx

我们经常在vue开发项目的过程中，遇到需要对input框使用v-modal的这种情况，在有的时候，不光需要双向数据绑定，还需要在改变数据之后绑定其它的操作，那么问题来了，你是使用@change绑定事件还是使用@click绑定事件

建议不要通过click绑定事件，对待input标签，最好通过change来触发，本人血的教训。

<input @change="inputchecked" class="goods-checked" 
v-model="shopcargoods[index].checked" type="checkbox" >

• 1
• 2

click执行的时间要早于change执行的时间，因为v-modal的时间是一个异步的。
当点击之后，v-modal可能还没有来得及将绑定在data里面的数据改变，click绑定的事件就执行了，这会导致click绑定事件里面拿到的data数据不是最新的。

change绑定的事件是一定要等到input框的value值改变之后才会被触发。
关于这一系列的顺序我是这样理解

点击input框–> click事件生效 --> v-modal改变绑定的data数据 --> 渲染到页面上改变input的value值 --> change事件生效