vue2.0 checbox的点击事件（使用心得）

vue项目开发在使用CheckBox时遇到一个点击响应问题，归根结底就是复选框当前v-model的数据点击响应问题。直接结合代码来说：

Html部分：

<input type="checkbox" id="label" v-model=" isChoose " />

<label for="label" @click="clickAct">点击复选框</label>

js部分：

data:{

       isChoose:false

},

methods:{

       clickAct(){

              if(…){

                     …

              }else{

                     …

              }

        }

}

如上所述：我一开始点击事件用@click，逻辑修改之后终于调通了（此时用的谷歌浏览器），美滋滋，其他部分测试也没问题，发给客户，结果客户那边用的火狐浏览器，发现火狐里的响应逻辑和谷歌里的恰恰相反。一开始一度质疑自己逻辑代码写的有问题。于是开始查询相关资料，最后解决问题，再一次美滋滋。

言归正传：到底是哪里出了问题？这就要追溯到@click本身。

在vue官方文档里有这么一句话，“可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码”，他的意思就是说，@click在点击的瞬间执行代码，而不是点击之后（我的逻辑就是根据点击之后的状态来执行的）。

那为什么谷歌click输出的是之后的值，火狐click输出的就是之前的值呐？鄙人不才，猜测是内核计算问题，导致响应的是不同结果。

如何解决：将@click换成@change就OK了。

关于@change官方文档是这样说的：“可以用v-on指令监听DOM事件，并在状态改变之后运行一些JavaScript代码”，也看到了，是状态改变之后执行逻辑代码，这个刚好和我写的逻辑不谋而合。

问题就这样解决了，美滋滋。

此次总结：

①、网页测试部分需要全面（谷歌、火狐、IE各来一遍），早点发现早点解决，在提交给客户之前将如上的这种低等问题扼杀。

②、官方文档也是书，每次阅读都要有新的收获。

③、遇到这个问题，静下心来写个小demo深入测试，很快就能解决问题。

④、做好该有的记录，万一项目跨度大，再次接触此问题忘了咋整。