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

栏目: 编程语言 · 发布时间: 5年前

内容简介:左下角显示了还有多少个 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未完成》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大型网站系统与Java中间件开发实践

大型网站系统与Java中间件开发实践

曾宪杰 / 电子工业出版社 / 2014-4-24 / 65.00

本书围绕大型网站和支撑大型网站架构的 Java 中间件的实践展开介绍。从分布式系统的知识切入,让读者对分布式系统有基本的了解;然后介绍大型网站随着数据量、访问量增长而发生的架构变迁;接着讲述构建 Java 中间件的相关知识;之后的几章都是根据笔者的经验来介绍支撑大型网站架构的 Java 中间件系统的设计和实践。希望读者通过本书可以了解大型网站架构变迁过程中的较为通用的问题和解法,并了解构建支撑大型......一起来看看 《大型网站系统与Java中间件开发实践》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具