首页 > 其他 > 详细

计算属性实现全选状态

时间:2019-12-18 00:48:36      阅读:102      评论:0      收藏:0      [点我收藏+]

一、模板:

技术分享图片

 

 

 二、

技术分享图片

 

 

三、利用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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!