[Vue 2.x Todo 教程] 全部标为完成

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

内容简介:全部标为完成的实现也非常简单,我们只需监听click事件,然后将所有未完成的 todos 标为完成即可:逻辑事实上是非常清晰的,只是map 是一种函数式编程的思想。假设我们有一个列表,我们需要对列表中的每一个元素做同样的操作,直观的方法就是遍历列表,然后依次应用这个函数到每个元素上,最后把作用后的结果返回。map 封装了这些步骤,让我们无需显示循环列表。

全部标为完成的实现也非常简单,我们只需监听click事件,然后将所有未完成的 todos 标为完成即可:

<div>
    <input type="button" 
           value="全部标为完成" 
           @click="markAllAsCompleted"/>
    ...
  </div>
... 
<script>
    let id = 0; // 用于 id 生成
    var app = new Vue({
        ...
        methods: {
            ...
            markAllAsCompleted: function () {
                this.todos.map(function (todo) {
                    if (!todo.completed) {
                        todo.completed = true
                    }
                })
            }
        }
    })
</script>

逻辑事实上是非常清晰的,只是 markAllAsCompleted 里面用到了一些 js 的高级方法,即 map 方法。

map 是一种函数式编程的思想。假设我们有一个列表,我们需要对列表中的每一个元素做同样的操作,直观的方法就是遍历列表,然后依次应用这个函数到每个元素上,最后把作用后的结果返回。map 封装了这些步骤,让我们无需显示循环列表。

在这里我们希望将 this.todos 这个列表中每一个完成的 todo 标为已完成,因此我们做了: this.todo.map(func) ,这个 func 就是每一个 todo 的操作,它的操作是这样的:

function (todo) {
    if (!todo.completed) {
        todo.completed = true
    }
}

即把所有未完成的 todo 的 todo.completed 置为 true

组合起来就完成了我们的需求。

ES6 还有一种箭头函数写法:

todo => todo.finished = true

实现的功能和上面那个 function 函数类似,同样能满足我们的需求,但是写法简洁了很多。箭头函数我们在后面的功能会用到,以此来简化代码,你也可以提前了解一下它,廖雪峰的教程给出了不错的讲解: 箭头函数

但要注意 ES6 语法不是所有浏览器都支持,推荐使用最新版 Chrome 或者 firefox。

-- EOF --


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

精通Windows应用开发

精通Windows应用开发

[美] Jesse Liberty Philip Japikse Jon Galloway / 苏宝龙 / 人民邮电出版社 / 59.00元

Windows 8.1的出现不仅提供了跨设备的用户体验,也提供了跨设备的开发体验。本书着眼于实际项目中所需要的特性,以及现有C#编程知识的运用,对如何最大限度地利用Metro、WinRT和Windows 8进行了讲解,内容详尽,注重理论学习与实践开发的配合。 Windows 8.1和WinRT的作用及其特殊性 如何使用先进特性创建具有沉浸感和吸引力的Windows 8.1应用 如......一起来看看 《精通Windows应用开发》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

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

多种字符组合密码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具