vue实现简易todolist
实现简易TodoList的步骤
创建Vue项目
使用Vue CLI创建一个新项目，运行以下命令：
vue create todo-list
cd todo-list
npm run serve组件结构设计
在src/components目录下创建TodoList.vue文件，作为主组件。
模板部分代码
<template>
<div class="todo-list">
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add new todo">
<ul>
<li v-for="(todo, index) in todos" :key="index">
<span :class="{ completed: todo.completed }" @click="toggleTodo(index)">
{{ todo.text }}
</span>
<button @click="removeTodo(index)">×</button>
</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
},
removeTodo(index) {
this.todos.splice(index, 1)
}
}
}
</script>样式部分代码
<style>
.todo-list {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.completed {
text-decoration: line-through;
color: #888;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 8px;
border-bottom: 1px solid #eee;
}
button {
background: none;
border: none;
color: red;
cursor: pointer;
}
</style>功能说明
- 输入框绑定
v-model实现双向数据绑定 @keyup.enter监听回车事件添加新任务v-for循环渲染任务列表toggleTodo方法切换任务完成状态removeTodo方法删除指定任务
进阶优化建议
- 添加本地存储功能，使用
localStorage持久化数据 - 增加任务分类功能，如"全部"、"已完成"、"未完成"筛选
- 添加任务编辑功能，双击任务可修改内容
- 引入动画效果提升用户体验
这个简易TodoList实现了基本的新增、状态切换和删除功能，可以作为Vue入门练习项目。
