还剩多少todo未完成 - Vue 2.x Todo 教程

左下角显示了还有多少个 todo 没有完成，现在固定显示 3，因为我们之前在 html 页面中设置的是 3，这显然没意思。我们应该动态地根据实际未完成 todo 的数量来显示。

这里的关键就是计算 todos 列表中还有多少个 todo 的 completed 属性为 false，这些 todo 就是未完成的，得到这些 todo 的个数就可以了。

前面说过，根据 Vue 对象已有的数据来计算新的结果，就是计算属性典型的应用场景。我们来计算一下未完成 todo 的结果，然后在模板中引用它：

<div>
    <span>剩余 {{leftTodosCount}} 项未完成 ---</span>
    ...
</div>

<script>
    ...
    var app = new Vue({
        ...
        methods: {
            ...
        },
        computed: {
            leftTodosCount: function () {
                return this.todos.filter(todo => !todo.completed).length
            }
        },
        directives: {
           ...
        }
    })
</script>

看看效果！记得每次看效果前刷新浏览器。

这里我们用到了 filter 函数，filter 和之前讲过的 map 函数是类似的，都是函数式编程的思想。map 用于将一个函数作用于列表的所有元素，然后得到一个作用后的列表结果。filter 顾名思义，就是要根据某个检测函数去列表中筛选出符合检测要求的结果。通常这个函数只返回两个值，列表元素符合要求返回真，否则返回假。filter 会返回所有检测为真的元素组成的列表。

我们这里的检测函数是：todo => !todo.completed，等价于：

function(todo){
    return !todo.completed
}

即如果 todo.completed 为假，即 todo 未完成，返回真，已完成返回假。所以我们就把未完成的 todo 筛选出来了。

关于箭头函数，廖雪峰的教程箭头函数讲的非常清晰，不懂的可以再系统了解一下。

如果你熟悉 Python 或者其它一些高级语言，一般都会提供一个叫 lambda 的函数，这是一种匿名函数，可用于定义函数体非常简单的函数。比如 Python 的 lambda x: x*x

这比写一个函数：
def square(x):
  return x*x
便捷很多。

-- EOF --