vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...

最近在公司项目中使用vue2.0做开发，在使用checkbox时遇到了一些问题，首先我们先了解一下需求。

如上如所示，在上方复选框被点击时，更改下方p标签的文本内容为：复选框已被选中。并将p标签文字颜色改为红色。

面对如此简单的需求我第一个想到的就是通过点击事件判断复选框状态，更改文本及css样式，代码如下：

点我

复选框没有被选中

export default {

data() {

return {

ckeckVal:false

}

},

methods:{

clickMe(){

var that=this;

console.log(that.ckeckVal);

}

}

}

.red{

color: red;

}

我们利用v-model来绑定checkbox的值，可以发现，当我们选中之后效果如下图：

@click的理解

打印的结果为false,但我们明明是选中状态，结果应该为true才对，为什么会这样呐，在vue的官方文档中我找到了下面的一段话：