js 中 实现复选框全选 子复选框案例_前端系列——Vue小案例

实现如下所示的一个小案例：

第一步：需要实现的功能和需要的数据分析

功能：定义数据并显示任务列表、添加任务、修改任务、删除任务、 统计任务、 筛选任务、 显示警告信息

数据：数据应该包含任务和完成的情况

第二步：定义数据并实现任务列表

注：用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个，以红色警示。

全部代码：