Vue.js 每日一題 實現一個簡單的待辦事項管理器
要求：
使用Vue.js創建一個待辦事項管理器，實現以下功能：
1.
添加新的待辦事項
2.
標記待辦事項為已完成/未完成
3.
刪除待辦事項
4.
顯示待辦事項總數和已完成數量
——————————————
題解：
待辦事項管理器
<!-- 添加新任務 -->
<div class="input-section">
<input
v-model="newTodo"
@keyup.enter="addTodo"
placeholder="請輸入待辦事項"
class="todo-input"
/>
<button @click="addTodo" class="add-btn">添加</button>
</div>
<!-- 統計信息 -->
<div class="stats">
<p>總共：{{ totalTodos }} 項，已完成：{{ completedTodos }} 項</p>
</div>
<!-- 待辦事項列表 -->
<ul class="todo-list">
<li
v-for="todo in todos"
:key="todo.id"
:class="{ completed: todo.completed }"
class="todo-item"
>
<input
type="checkbox"
v-model="todo.completed"
class="todo-checkbox"
/>
<span class="todo-text">{{ todo.text }}</span>
<button @click="deleteTodo(todo.id)" class="delete-btn">刪除</button>
</li>
</ul>
知識點解析：
1.
v-model雙向綁定：用于輸入框與數據的雙向綁定
2.
v-for列表渲染：遍歷待辦事項數組
3.
v-if條件渲染：根據條件顯示不同內容
4.
computed計算屬性：自動計算總數和完成數
5.
methods方法：處理添加、刪除等用戶操作
6.
事件處理：@click、@keyup.enter等事件監聽
7.
class綁定：動態添加CSS類名
擴展練習：
1.
添加編輯功能
2.
添加過濾功能（顯示全部/已完成/未完成）
3.
使用localStorage持久化數據
4.
添加優先級標記功能
浙公網安備 33010602011771號