美化样式示意图：
后端IDEA代码示意图：
代码解释：
1. isAllChecked 计算属性的作用
isAllChecked 用于实现 “全选 / 全不选” 功能，它是一个 双向绑定 的计算属性（因为 v-model 需要同时支持读取和设置值）：
get方法：用于读取全选状态（判断是否所有任务都已完成）。set方法：用于设置全选状态（当用户勾选全选框时，批量更新所有任务的完成状态）。
2. 为什么必须同时有 get 和 set
- 单向计算属性：如果计算属性只需要读取（例如单纯的统计值），可以只写
get（或直接写成函数形式）。 - 双向绑定（
v-model）：当计算属性用于v-model时，必须同时提供get和set，因为v-model需要：- 通过
get获取当前值（决定复选框是否选中）。 - 通过
set设置新值（当用户修改复选框时，更新数据源）。
- 通过
如果缺少 set 方法，会导致 v-model 报错，因为无法处理用户对复选框的修改操作。
3. 代码奇数偶数列的颜色逻辑
li:nth-child(even) 是 CSS 中一种伪类选择器，它的作用是 匹配父元素（这里是 ul）中第偶数个子元素（从 2 开始，即 2、4、6…）的 li 元素。以下是具体解释：
:nth-child(even) 的逻辑：
even 表示偶数，它会遍历父元素（ul）的所有子元素（li），为位置是偶数的 li 元素应用样式。例如，第一个 li 位置是 1（奇数），不匹配；第二个 li 位置是 2（偶数），匹配；第三个位置是 3（奇数），不匹配，以此类推。因此，只有双数位置的 li 会被选中并应用 background-color: lavender 样式，呈现出淡紫色背景。
与代码的关联：
你的代码通过 v-for 循环生成多个 li 元素，这些 li 作为 ul 的子元素，会按顺序排列。浏览器在渲染时会为每个 li 计算位置，li:nth-child(even) 就会精准匹配到双数位置的 li，从而只让双数的任务名称（列表项）显示颜色。
如果想让奇数位置的 li 也有样式（如区分奇偶行），可以补充 li:nth-child(odd) 选择器（odd 表示奇数），例如：
li:nth-child(even) {background-color: lavender; /* 偶数行背景色 */}
li:nth-child(odd) {background-color: #f0f0f0; /* 奇数行背景色 */
}4.“全部/已完成”与“清除已完成”的左右对齐格式：
- 给父容器添加
align-items: center确保内容垂直居中对齐。 - 移除冗余的
padding-right: 60px，通过justify-content: space-between让两个子元素自动左右分布。
3.添加 padding: 10px 0 增加上下内边距让布局更舒适。
<div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0;"><div><input type="checkbox" v-model="isAllChecked" style="margin-right: 8px;"><span>已完成{{finishedNum}} /全部{{renwus.length}}</span></div><button @click="clearFinished" style="padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; cursor: pointer;">清除已完成</button>
</div>
