Vue.js 实现简单待办事项列表：含添加、编辑与状态切换功能

这是一个简单的待办事项列表应用的 Vue.js 代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todo List</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <h1>This is a todolist</h1> <input type="text" v-model="newTodo" @keyup.enter="addTodo"> <ul> <li v-for="(todo, index) in todos" :key="index" @click="toggleTodo(index)" :style="{textDecoration: todo.completed ? 'line-through' : 'none'}"> {{ todo.text }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push({ text: this.newTodo, completed: false }); this.newTodo = ''; } }, toggleTodo(index) { this.todos[index].completed = !this.todos[index].completed; } } }); </script> </body> </html> ``` 在这个简单的应用中，我们使用了Vue.js框架来实现待办事项列表的功能。用户可以在输入框中输入待办事项，按回车键或按钮添加到列表中。点击列表中的项目可以切换其状态（已完成或未完成）。通过简单的CSS样式，我们可以实现已完成事项的文本样式变化。 ######[AI写代码神器 | 938点数解答 | 2024-11-25 08:16:14]

服务商

更多选项

快捷项

自定义