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

好的，下面是一个简单的待办事项列表应用的实现方案，基于Vue.js框架。 ### 项目初始化 确保安装了Node.js和npm，然后通过Vue CLI创建新项目： ```bash npm install -g @vue/cli vue create todo-app cd todo-app ``` 选择默认配置即可。 ### 安装依赖 进入项目目录后，安装任何额外需要的库（如果有的话）。对于这个简单的应用，基本的Vue CLI设置应该足够了。 ### 编写代码 #### 修改 `src/App.vue` 打开`App.vue`文件，替换为以下内容： ```vue <template> <div id="app"> <h1>This is a TodoList</h1> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add new todo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos" :key="index" @click="toggleTodo(index)" :class="{ completed: todo.completed }"> {{ todo.text }} </li> </ul> </div> </template> <script> export default { data() { return { 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> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; color: #2c3e50; margin-top: 60px; } .completed { text-decoration: line-through; } </style> ``` ### 代码解释 - **模板部分**：定义了一个标题、一个输入框、一个按钮和一个无序列表。输入框绑定到`newTodo`数据属性，当按下回车键时调用`addTodo`方法。列表项使用`v-for`指令循环渲染，每个项都可以通过点击来切换完成状态。 - **脚本部分**：定义了两个数据属性`newTodo`和`todos`。`addTodo`方法将新的待办事项添加到列表中，`toggleTodo`方法用于切换待办事项的完成状态。 - **样式部分**：简单地设置了应用的基本样式，并为已完成的待办事项添加了删除线效果。 ### 运行项目 在命令行中运行以下命令启动开发服务器： ```bash npm run serve ``` 打开浏览器访问`http://localhost:8080/`，你应该能看到一个简单的待办事项列表应用。 ### 额外注意的逻辑点 1. **输入验证**：在添加新的待办事项之前，检查输入是否为空或仅包含空格。 2. **持久化存储**：考虑将待办事项列表保存到本地存储或服务器上，以便在刷新页面后仍能保留数据。 3. **用户体验**：为按钮和输入框添加一些视觉反馈，例如点击按钮时改变颜色或显示加载动画，提升用户体验。 希望这些信息对你有帮助！如果有任何问题，随时欢迎提问。 ######[AI写代码神器 | 715点数解答 | 2024-11-25 15:40:13]