实现如下所示的一个小案例:
第一步:需要实现的功能和需要的数据分析
功能:定义数据并显示任务列表、添加任务、修改任务、删除任务、 统计任务、 筛选任务、 显示警告信息
数据:数据应该包含任务和完成的情况
第二步:定义数据并实现任务列表
注:用v-for指令遍历todos数据显示整个todos的任务列表界面。(注意:每个任务的状态栏需使用v-model指令双向绑定todo.done数据)
第三步:添加任务
第四步:修改任务
任务的状态是可以切换的。由于我们在checkbox中,使用了v-model指令,已经实现了双向的数据绑定,就不需要再写其他代码了。
第五步:删除任务
当点击删除超链接的时候,需要删除当前这个任务,因此需要在a标签注册点击事件来达到删除的目的。想象一下,vue是用数据来渲染页面的,之前用v-for进行渲染的。那么我们把数据给减少一个,不就达到删除的目的了吗。因此可以调用splice方法用于删除todos数组中的数据。
第六步:统计任务
需要统计已完成的任务和总的任务数。其中,任务总数就是todos数组的长度,直接使用todos.length即可。已完成的任务数,这个数据的结果是根据任务的完成状态来实时改变的,需要经过计算得到,因此定义一个计算属性finished来实现。
第七步:筛选任务
如果“显示所有完成的未完成的任务”这个复选框选中的话,就应该显示所有的任务。反之,就只显示未完成的任务。对于这个复选框,我们需要时刻获取它的值,并且去修改它的值。所以比较好的做法就是再定义一个数据,用于表示checkbox是否勾选了。
当勾选了复选框,all值为true时,任务列表显示todos数组中的所有数据;当未勾选复选框,all值为false时,任务列表显示todos数组中的done值为false的数据;即此时的todos数据需要进行过滤,因此可重新定义一个计算属性filterTodos,用于存储过滤后的todos数据。
第八步:显示警告信息
如果任务全部完成了,隐藏;如果未完成的任务数小于3个,以黄色警示;如果未完成的任务超过3个,以红色警示。
全部代码: