实现以下小案例。
第一步：需要实现的功能和所需的数据分析
权能：定义数据、显示任务列表、添加任务、修改任务、删除任务、汇总任务、筛选任务和显示警告信息
数据：数据必须包含任务和完成百分比
第二步：定义数据和实现任务列表
注：使用v-for命令遍历todos数据以显示整个todos的任务列表界面。 (注意：每个任务的状态栏都需要使用v-model命令双向绑定todo.done数据。)
步骤3 :添加任务
步骤4 :修改任务
任务状态可以切换。 我们在checkbox上，使用v-model指令实现了双向数据绑定，所以不再需要写其他代码。
步骤5 :删除任务
如果单击超链接将其删除，则必须删除当前任务。 因此，为了实现删除的目的，需要在a标签中注册点击事件。 想象一下。 vue正在用数据渲染页面。 以前用v-for渲染。 那么，减少一个数据不是就能达到删除的目的吗？ 因此，可以调用splice方法从todos数组中删除数据。
步骤6 :统计任务
必须统计已完成的任务和总任务数。 这里，任务的总数是todos数组的长度，可以直接使用todos.length。 完成的任务数，该数据的结果需要根据任务的完成状态实时变化和计算，因此定义计算属性finished来实现。
步骤7 :过滤任务
如果选中了“显示所有未完成的任务”复选框，则必须显示所有任务。 相反，只显示未完成的任务。 此复选框要求始终获取值并更改值。 所以，最好再定义一个指示checkbox是否被选中的数据。
如果选中复选框且all值为true，则任务列表将显示todos数组中的所有数据； 如果未选中该复选框且all值为false，则任务列表将显示todos数组中done值为false的数据； 这意味着此时必须过滤todos数据，因此可以重新定义存储过滤todos数据的计算属性filterTodos。
步骤8 :显示警告消息
任务全部结束后，隐藏； 未完成的任务数少于3个时，用黄色警告； 如果有三个以上的任务没有完成，用红色警告。
所有代码：