web用vue实现todolist
使用 Vue 实现 TodoList
初始化 Vue 项目
通过 Vue CLI 或 Vite 创建一个新的 Vue 项目。以下是使用 Vue CLI 的示例命令：
npm install -g @vue/cli
vue create vue-todolist
cd vue-todolist
npm run serve创建 TodoList 组件
在 src/components 目录下创建 TodoList.vue 文件，编写以下代码：
<template>
<div class="todo-list">
<h3>Todo List</h3>
<input
v-model="newTodo"
@keyup.enter="addTodo"
placeholder="Add a new task"
/>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<span :class="{ completed: todo.completed }">
{{ todo.text }}
</span>
<button @click="toggleTodo(index)">Toggle</button>
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim() === '') return;
this.todos.push({
text: this.newTodo,
completed: false
});
this.newTodo = '';
},
toggleTodo(index) {
this.todos[index].completed = !this.todos[index].completed;
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
<style>
.completed {
text-decoration: line-through;
color: gray;
}
.todo-list {
max-width: 400px;
margin: 0 auto;
}
</style>在主组件中引入 TodoList
修改 src/App.vue，引入并使用 TodoList 组件：
<template>
<div id="app">
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
name: 'App',
components: {
TodoList
}
};
</script>运行项目
启动开发服务器，查看效果：
npm run serve打开浏览器访问 http://localhost:8080，即可看到 TodoList 应用。
功能扩展（可选）
- 本地存储：使用
localStorage持久化存储任务列表。 - 过滤功能：添加“全部”、“已完成”、“未完成”的筛选选项。
- 编辑功能：允许用户修改已有任务内容。
注意事项
- 确保 Vue 版本为 2.x 或 3.x（代码示例适用于 Vue 2）。
- 如果需要使用 Vue 3，需调整语法（如
setup函数和 Composition API）。
