首页 > 其他 > 详细

vue中的计算属性

时间:2021-08-14 16:44:05      阅读:12      评论:0      收藏:0      [点我收藏+]

1.计算属性的特殊,只能当属性进行使用。

2.计算属性由两部分,平常这样写

  computed: {
                //计算有几个完成的事情
                add: function() {
                    var sum = 0;
                    this.todos.some(item => {
                        if (item.completed == true) {
                            sum++;
                        }
                    })
                    return sum;
                }
            }

实际上就是使用了get方法,当item.complete的值进行变化的时候,就会自动触发。

当用全选按钮进行全选的时候,

  // 使用计算属性的方式处理全选的联动效果
            toggleStat: {
                get() {
                    console.log("调用了get");
                    return this.todos.every(item => item.completed)
                },
                set(val) {
                    console.log("调用了set");

                    this.todos.forEach(todo => todo.completed = val)
                }
            }

 代码使用了set,点击全选的时候首先会调用set方法,遍历每个数组元素使他们完成或者未完成,给计算属性赋值时触发

 

这里是我的理解,get在这里起到返回所有事情到底完成了没有,全都完成返回true,有一个没完成就返回false,这样可以控制全选按钮的样式。而set方法是在按下全选时,把内容的completed一致划,然后在改变了completed的值后,get监听到内容变化了,执行,修改全选按钮的样式。

 

vue中的计算属性

原文:https://www.cnblogs.com/popopo/p/15141021.html

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