内容简介:全部标为完成的实现也非常简单,我们只需监听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 --
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Principle教程:如何完成数字变化+环形加载?
- 【实战教程】使用知晓云完成小程序客服消息的自动回复
- [Vue 2.x Todo 教程] 还剩多少todo未完成
- 教程:使用iPhone相机和openCV来完成3D重建(第一部分)
- 面向聪明小白的编程入门教程 完成文档转换器(Part 10)
- [Vue 2.x Todo 教程练习参考答案] 标为完成练习参考答案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Haskell趣学指南
[斯洛文尼亚] Miran Lipovaca / 李亚舟、宋方睿 / 人民邮电出版社 / 2014-1
《haskell趣学指南》是一本讲解haskell这门函数式编程语言的入门指南,语言通俗易懂,插图生动幽默,示例短小清晰,结构安排合理。书中从haskell的基础知识讲起,涵盖了所有的基本概念和语法,内容涉及基本语法、递归、类型和类型类、函子、applicative 函子、monad、zipper及所有haskell重要特性和强大功能。 《haskell趣学指南》适合对函数式编程及haske......一起来看看 《Haskell趣学指南》 这本书的介绍吧!