内容简介:左下角显示了还有多少个 todo 没有完成,现在固定显示 3,因为我们之前在 html 页面中设置的是 3,这显然没意思。我们应该动态地根据实际未完成 todo 的数量来显示。这里的关键就是计算 todos 列表中还有多少个 todo 的前面说过,根据 Vue 对象已有的数据来计算新的结果,就是计算属性典型的应用场景。我们来计算一下未完成 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
这比写一个函数:
python
def square(x):
return x*x
便捷很多。
-- EOF --
以上所述就是小编给大家介绍的《[Vue 2.x Todo 教程] 还剩多少todo未完成》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Principle教程:如何完成数字变化+环形加载?
- [Vue 2.x Todo 教程] 全部标为完成
- 【实战教程】使用知晓云完成小程序客服消息的自动回复
- 教程:使用iPhone相机和openCV来完成3D重建(第一部分)
- 面向聪明小白的编程入门教程 完成文档转换器(Part 10)
- [Vue 2.x Todo 教程练习参考答案] 标为完成练习参考答案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
马云现象的经济学分析:互联网经济的八个关键命题
胡晓鹏 / 上海社会科学院出版社 / 2016-11-1 / CNY 68.00
互联网经济的产生、发展与扩张,在冲击传统经济理论观点的同时,也彰显了自身理论体系的独特内核,并与那种立足于工业经济时代的经典理论发生显著分野。今天看来,“马云”们的成功是中国经济长期“重制造、轻服务,重产能、轻消费,重国有、轻民营”发展逻辑的结果。但互联网经济的发展却不应仅仅止步于商业技巧的翻新,还需要在理论上进行一番审慎的思考。对此,我们不禁要问:互联网经济驱动交易发生的机理是什么?用户基数和诚......一起来看看 《马云现象的经济学分析:互联网经济的八个关键命题》 这本书的介绍吧!