Vue.js 打造功能完备待办事项列表：含添加、编辑、状态切换及拓展功能

以下是使用 Vue.js 框架实现待办事项列表应用的代码示例： ```html <template> <div> <h2>this is a todolist</h2> <input type="text" v-model="newTask" @keyup.enter="addTask" /> <button @click="addTask">添加</button> <ul> <li v-for="(task, index) in tasks" :key="index" @click="toggleTaskStatus(index)"> <span :class="{ completed: task.completed }">{{ task.text }}</span> </li> </ul> </div> </template> <script> export default { data() { return { newTask: '', tasks: [], }; }, methods: { addTask() { if (this.newTask.trim()!== '') { this.tasks.push({ text: this.newTask, completed: false }); this.newTask = ''; } }, toggleTaskStatus(index) { this.tasks[index].completed =!this.tasks[index].completed; }, }, }; </script> <style scoped> .completed { text-decoration: line-through; } </style> ``` 以下是 3 点额外需要注意的逻辑点： 1. 错误处理，比如输入为空时添加任务的情况。 2. 考虑添加删除待办事项的功能。 3. 对任务列表的排序和筛选功能的拓展。 ######[AI写代码神器 | 359点数解答 | 2024-11-20 17:53:23]