批量清除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 --


0 条评论 / 0 人参与