美化樣式示意圖：
后端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>
