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

栏目: JavaScript · 发布时间: 5年前

内容简介:接下来还剩下最后两个清除已完成和清除全部 todo 的功能,有了如何筛选todo 的经验,清除todo也是小菜一碟,只要把筛选出来的 todo 从 todos 列表删除就可以了。老套路,先为按钮绑定事件,然后实现相应的绑定方法,相信你已经轻车熟路了:bingo!恭喜你完成了一个非常酷的,具有极简风格设计的 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 --


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

组合数学

组合数学

Richard A.Brualdi / 机械工业出版社 / 2009-3 / 49.00元

《组合数学(英文版)(第5版)》英文影印版由Pearson Education Asia Ltd.授权机械工业出版社独家出版。未经出版者书面许可,不得以任何方式复制或抄袭奉巾内容。仅限于中华人民共和国境内(不包括中国香港、澳门特别行政区和中同台湾地区)销售发行。《组合数学(英文版)(第5版)》封面贴有Pearson Education(培生教育出版集团)激光防伪标签,无标签者不得销售。Englis......一起来看看 《组合数学》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具