Vue中TodoList案例_编辑

**Vue 中 TodoList 案例**

在本文中，我们将创建一个简单的 TodoList 应用，展示 Vue 的基本使用方法。这个应用将包括以下功能：

* 添加新任务* 删除已完成任务* 编辑任务名称和描述* 完成任务**项目结构**

bashtodo-list/
public/
index.htmlsrc/
App.vuemain.jsstore/
index.jsTodoList.vuecomponents/
TodoItem.vueTodoForm.vueutils/
dateUtil.jspackage.json

**TodoList 组件**

首先，我们需要创建 TodoList 组件。这个组件将负责展示任务列表和提供编辑功能。

javascript// src/components/TodoList.vue<template>
 <div>
 <h1>Todo List</h1>
 <ul>
 <li v-for="(todo, index) in todos" :key="index">
 {{ todo.name }} ({{ todo.done ? '完成' : '未完成' }})
 <button @click="editTodo(todo)">编辑</button>
 <button @click="deleteTodo(todo)">删除</button>
 </li>
 </ul>
 </div>
</template>

<script>
export default {
 name: "TodoList",
 data() {
 return {
 todos: [
 { id:1, name: '任务一', done: false },
 { id:2, name: '任务二', done: true },
 { id:3, name: '任务三', done: false }
 ]
 };
 },
 methods: {
 editTodo(todo) {
 console.log('编辑任务:', todo);
 },
 deleteTodo(todo) {
 console.log('删除任务:', todo);
 }
 }
};
</script>

**TodoItem 组件**

接下来，我们需要创建 TodoItem 组件。这个组件将负责展示单个任务。

javascript// src/components/TodoItem.vue<template>
 <li>
 {{ name }} ({{ done ? '完成' : '未完成' }})
 <button @click="toggleDone">完成</button>
 </li>
</template>

<script>
export default {
 name: "TodoItem",
 props: ['todo'],
 data() {
 return {
 done: this.todo.done };
 },
 methods: {
 toggleDone() {
 console.log('任务完成:', this.todo);
 }
 }
};
</script>

**TodoForm 组件**

接着，我们需要创建 TodoForm 组件。这个组件将负责提供添加新任务的表单。

javascript// src/components/TodoForm.vue<template>
 <form @submit.prevent="addTodo">
 <input type="text" v-model="name" placeholder="输入任务名称">
 <button>添加</button>
 </form>
</template>

<script>
export default {
 name: "TodoForm",
 data() {
 return {
 name: ''
 };
 },
 methods: {
 addTodo() {
 console.log('添加新任务:', this.name);
 }
 }
};
</script>

**App 组件**

最后，我们需要创建 App 组件。这个组件将负责展示 TodoList 和 TodoForm。

javascript// src/App.vue<template>
 <div>
 <TodoList />
 <TodoForm />
 </div>
</template>

<script>
import TodoList from './components/TodoList.vue';
import TodoForm from './components/TodoForm.vue';

export default {
 name: "App",
 components: { TodoList, TodoForm }
};
</script>

**main.js**

javascript// src/main.jsimport Vue from 'vue';
import App from './App.vue';

Vue.createApp(App).mount('#app');

在上面的代码中，我们创建了一个简单的 TodoList 应用，展示了 Vue 的基本使用方法。这个应用包括添加新任务、删除已完成任务、编辑任务名称和描述以及完成任务等功能。

**注意**

* 这个案例仅供参考，不适合生产环境。
* 需要在项目中安装必要的依赖项（例如 `vue` 和 `vuex`）。
* 可以根据需求进行扩展和修改。