[Vue 2.x Todo 教程] 批量清除todo
栏目: JavaScript · 发布时间: 7年前
内容简介:接下来还剩下最后两个清除已完成和清除全部 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 --
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
着陆页:获取网络订单的关键
谢松杰 / 电子工业出版社 / 2017-1-1 / CNY 55.00
着陆页是用户点击广告后看到的第一个页面,是相关产品和服务的商业模式与营销思想的载体,是实现客户转化的关键。本书从“宏观”和“微观”两个层面对着陆页的整体框架和局部细节进行了深入的讨论,既有理论和方法,又有技术与工具,为读者呈现了着陆页从策划到技术实现的完整知识体系,帮助读者用最低的成本实现网站最高的收益。 谢松杰老师作品《网站说服力》版权输出台湾,深受两岸读者喜爱。本书是《网站说服力》的姊妹......一起来看看 《着陆页:获取网络订单的关键》 这本书的介绍吧!