列表渲染

使用v-for 指令渲染基于源数组的列表

这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样。

注意，我们还给每个 todo 对象设置了唯一的 id，并且将它作为特殊的 key attribute 绑定到每个 <li>。key 使得 Vue 能够精确地移动每个 <li>，以匹配对应的对象在数组中的位置。

更新列表的方式

源数组上调用变更方法

todos.value.push(newTodo)

使用新的数组替代原数组

todos.value = todos.value.filter(/* ... */)

Example 1

这里有一个简单的 todo 列表——试着实现一下 addTodo() 和 removeTodo() 这两个方法的逻辑，使列表能够正常工作！

Answer

Example 2

🎯 请完成以下任务：

1. 补全 addTodo() 方法：将输入框中的内容添加为新的 todo 项，并清空输入框。
2. 补全 removeTodo() 方法：点击每项右侧的 “X” 按钮后，将该项从列表中删除。
3. 确保每个 todo 有唯一的 id，并使用 :key 正确绑定。
4. 使用 v-for 渲染 todo 项，显示 todo 的文本，并添加删除按钮。

Answer