全部标为完成

2019-01-074891 阅读2 评论

全部标为完成的实现也非常简单，我们只需监听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 --

自定义指令实现自动聚焦还剩多少todo未完成

2 评论

登录后回复

Qin Yuan

2020-07-12 14:12:29

hmm 我改写了一下但是我不懂我这个为什么不起作用
我是在那个按钮上反复变化markstring 是全部标记完成或者全部标记不完成,然后触发这个markAll的function

markAll:function(){

     this.allComplete = !this.allComplete;

     this.todos.map(function (todo) {
                todo.completed =  this.allComplete;
                console.log(todo.titile);
            });

      this.markstring = this.allComplete?"Mark all incompleted":"Mark all completed";

   }

我可以看到 this.markstring 改变了但是 console.log(todo.titile) 那个打出来的是undefined,我页面有几项就打了几次
同时页面也没有变化这些成为横线划过.
所以好像是这个todo没有取成功的感觉?

Qin Yuan

2020-07-12 14:25:35

我又自己找出错误了哈哈哈.
首先打log的时候todo.titile 这个词打错了应该是title
然后是到了map函数里面这个"this"的指向变了,不是vue里面那个了(这个我学艺不精也搞不清楚到底指的谁了)
markAll:function(){
this.allComplete = !this.allComplete;
c = this.allComplete;

     this.todos.map(function (todo) {
                todo.completed =  c;

            });

      this.markstring = this.allComplete?"Mark all incompleted":"Mark all completed";

   }

改成这样一样就ok了

Vue 2.x Todo 教程

全部标为完成