摘要:继上一篇搭建了这个的框架之后,我们轻松实现了为添加一个,这次需要实现的是对的编辑,删除,完成等功能。接受到之后,然后删除,。这是在前面一直都没有提及到的,现在终于要派上用场了。所以,为了实现这一功能,我们进而引入的部分。
继上一篇搭建了这个Todo App的框架之后,我们轻松实现了为App添加一个task,这次需要实现的是对task的编辑,删除,完成等功能。如果你认真看完,你会发现:在Vue中,一切原来那么简单!
编辑一个task我们之前通过下面的代码将每个task循环出来:
有了每个task之后,我们准备实现的是在用户双击task时候,就是双击{{ task.body }}的时候,用户可以对该task进行编辑。实现的思路我大概是这样想的:
用户双击 --> 拿到task的body部分 --> 删除展示出来的task --> 将task的body部分赋给newTask --> 回到添加task的流程
考虑到这里,我们就遇到了一个问题,怎么删除task跑出来了,不是在编辑task么?好吧,顺便在这个时候将删除task实现了吧,反正正常的App都会有删除功能,所以现在我们来先实现删除task。
删除task为了更好地看到删除task,我为每个task后面加了一个删除task的小按钮:
{{ task.body }}
上面这一行就是加了一个x删除小按钮,我们在这里使用Vue的事件监听,当用户点击这个x按钮的时候,我们执行removeTask方法,这个方法接受一个参数,就是task本身。所以在todo.js里面的methods部分加上removeTask:
removeTask: function(task) { this.tasks.$remove(task); }
有没有感觉非常简单,就是两行代码而已!这里的$remove方法是Vue官方提供的一个删除方法,其实就是使用了js的slice。接受到task之后,然后删除,easy enough。
在回到前面的编辑task,我们在实现了删除task之后,这个也变得非常容易了。
完善编辑task按照前面的思路,我们首先需要为task的body绑定一个方法:
类似的,我们监听用户的双击事件,如果用户双击了该span,我们执行editTask方法。所以,我们来写一下editTask方法:
editTask: function(task) { this.newTask = task.body; this.removeTask(task); this.$$.newTask.focus(); },
依然是将editTask放在todo.js的methods部分,该方法接受一个参数,就是需要编辑的task自身,然后将task的body部分赋给newTask,删除原来的task,最后就是为newTask输入框获取一下焦点。这里的newTask因为和input输入框进行了数据双向绑定,那么这个时候input输入框就会自动填充task的body数据。像这样:
完成一个task对于一个Todo App,用户新增一个task之后,主要的目的是为了完成这个task。这时候我们就需要用到task的另一个属性了:completed。这是在前面一直都没有提及到的,现在终于要派上用场了。完成一个task,其实就是将completed属性的值设为true,所以我们来实现一下:
{{ task.body }}
像删除一个task一样,我在task后面又加了一个打勾的小按钮。用户点击这个按钮的时候,执行toggleTaskCompletion方法,为什么叫toggleTaskCompletion而不叫completeTask呢,因为考虑到用户在点完成之后,有可能反悔了,当他再次点击的时候,task又回到了未完成的状态。所以上代码吧:
toggleTaskCompletion: function(task) { task.completed = ! task.completed; },
这个方法中,我们只是将task中的completed属性设置为它的相反值,用户点击一次,这个值就改变一次。刚写完这个方法,你可能会迫不及待去点击完成按钮,但是这个时候貌似没有什么效果,但是chrome的console又没有报错,这是怎么回事?
其实答案就是:这段代码确实正确的执行了,只是我们在展示task的时候没有根据task的completed状态来筛选认为而已。
所以,为了实现这一功能,我们进而引入Vuejs的filters部分。
实现完成task与未完成的task分离在实现之前,我们不妨用一个区域来展示完成的task,一个区域来展示未完成的task,所以跟展示task时候很相似:
Tasks ({{ tasks.length }})
- {{ task.body }}
Completed
- {{ task.body }}
我们在上面用两种方式来实现了Vuejs的filter,一个是filterBy true in completed,这是说只要completed属性为true的task,另一个就是inProcess,这个就需要我们自己来实现一下:
data: { tasks: [], newTask: "" }, filters: { inProcess: function(tasks) { return tasks.filter(function(task){ return ! task.completed; }); } },
上面的代码就是一个简单的filter实现,return ! task.completed;的意思是返回task.completed的值为false的task。
这里我们就简单的实现了完成任务了:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/85816.html
摘要:如果用户确实有输入,则将用户输入的部分作为的部分,通过新增一个,最后我们将再次设为空字符串,因为这样用户在提交或者按下回车之后,里的输入框才会重新变为空的。 在现在 Angular和React大行其道的JS世界,其实我更钟爱的是Vue.js。 本文并不是意在比较三者的好坏,而是用Vue来写一个Todo Web应用,没错,重复来造一下经典的轮子。 还是先来预览图 showImg(h...
摘要: Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...
摘要:漢字拼音 Awesome Python A curated list of awesome Python frameworks, libraries and software. Inspired by awesome-php. Awesome Python Environment Management Package Management Package Repositorie...
摘要:最佳解析最佳解析最佳解析是一个依赖注入框架,由谷歌开发,最早的版本由公司开发。在对的介绍中指出,即,这里的即数据结构中的有向无环图。也就是说,是一个基于有向无环图结构的依赖注入库,因此的使用过程中不能出现循环依赖。 在开发过程中使用过很多优秀框架,比如网络的okhttp,图片的Fresco,注入的Gagger2等,都是非常优秀的框架。 所以今天在此介绍下至今本人知道的一些比较流行主流且...
阅读 1758·2021-10-27 14:15
阅读 3769·2021-10-08 10:12
阅读 1137·2021-09-22 15:55
阅读 3209·2021-09-22 15:17
阅读 780·2021-09-02 15:40
阅读 1733·2019-08-29 18:33
阅读 1052·2019-08-29 15:22
阅读 2335·2019-08-29 11:08