Vue+element实现todo（五）

（一）计算属性
我们想要在页面下方统计全部数量，未完成数量以及已完成的数量，就要用到计算属性complted，这个属性的存在是因为在模板中放入太多的逻辑会让模板过重且难以维护，
So...
返回全部数量很简单，直接获取list的长度就好了，

image.png

接下来是获取完成数量的长度，利用了filter，filter这个函数就是要根据某个检测函数去列表中筛选出符合检测要求的结果，因为要筛选done=true的长度（不要吐槽我的参数名....），所以我们就把未完成的 todo 筛选出来了

image.png

接着获取未完成的长度，

image.png

这里用到了箭头函数，等价于

function(sa){
    return sa.done
}

关于箭头函数。可以看下廖雪峰老师的讲解https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

（二）清空已完成
依旧用到了element的button组件，绑定一个函数

image.png

然后实现相应绑定方法，

image.png

Bingo~~~~