[Vue 2.x Todo 教程] 批量清除todo

接下来还剩下最后两个清除已完成和清除全部 todo 的功能，有了如何筛选todo 的经验，清除todo也是小菜一碟，只要把筛选出来的 todo 从 todos 列表删除就可以了。

老套路，先为按钮绑定事件，然后实现相应的绑定方法，相信你已经轻车熟路了：

<input type="button" value="清除已完成" @click="clearCompleted">
<input type="button" value="清除全部" @click="clearAll">

<script>
    let id = 0; // 用于 id 生成
    var app = new Vue({
        ...
        methods: {
            ...
            clearCompleted: function () {
                this.todos = this.todos.filter(todo => !todo.completed)
            },
            clearAll: function () {
                this.todos = []
            }
        },
    })
</script>

bingo！恭喜你完成了一个非常酷的，具有极简风格设计的 todo 应用！！祝贺一下自己。

练习

用户体验增强。

现在我们的 todo 应用已经非常酷了。但是还有一点用户体验需要优化。虽然我们采用极简主义风格设计，但是我们在用户体验方面绝不马虎。这是我长期使用 Google、Amazon、Facebook 等国外一流企业的应用而获得的经验和感悟。

当没有todo是，全部标为完成的按钮和底部的删选栏一直出现，这是没有意义的，只有有 todo 时才让它们出现。试着完成这个功能。

当用户的全部 todo 都完成时想，显示的依然是剩余0项未完成，这给用户的感觉不好。为什么不显示一点别的信息，比如“全部完成，你真是太优秀了”。这能增大用户使用我么产品的粘性。试着完成这个功能。

同样的，之前已经提过，删除功能一定要柔软，不能太粗暴。现在用户如果不小心点了清楚全部的按钮，它的所有 todo 都没了，如果这些 todo 对它很重要的话。尝试实现清楚前确认提醒。之前我们已经实现过类似的需求。此外，给用户加一个回收站功能，用户能够查看已经删除的所有todo。

-- EOF --