计算属性实现全选状态

一、模板:

 二、

三、利用computed计算属性checkAllFlag

 checkedCount属于计算属性,不是方法,不需要再data函数里面在进行定义

为啥toggleCheckAll函数里面不能用this.checkAllFlag = !this.checkAllFlag;实现全选呢?

因为this.checkAllFlag这里永远赋值不了,比如:当 !this.checkAllFlag中的checkAllFlag为true时,取反就是false,然后就给this.checkAllFlag赋值为false,但该地方是赋值不进的,因为computed计算它会实时计算,但刚给this.checkAllFlag赋值为false,上面computed会发现你全部都是选中,然后就会给this.checkAllFlag赋值成true。this.checkAllFlag的值永远都为true。

解决方法:可以通过声明一个变量:

var flag = ! this.checkAllFlag

flag变量是可以变的。

原文地址:https://www.cnblogs.com/psxiao/p/12057349.html