用vue实现todolist
使用 Vue 实现 TodoList
以下是基于 Vue 3 的 Composition API 实现一个简单 TodoList 的完整代码示例。
创建 Vue 项目
通过 Vue CLI 或 Vite 创建一个新项目：
npm create vue@latest todolist
cd todolist
npm install实现 TodoList 组件
在 src/components 目录下创建 TodoList.vue 文件：
<template>
<div class="todo-app">
<h1>Todo List</h1>
<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 setup>
import { ref } from 'vue';
const newTodo = ref('');
const todos = ref([]);
const addTodo = () => {
if (newTodo.value.trim() === '') return;
todos.value.push({
text: newTodo.value,
completed: false
});
newTodo.value = '';
};
const toggleTodo = (index) => {
todos.value[index].completed = !todos.value[index].completed;
};
const removeTodo = (index) => {
todos.value.splice(index, 1);
};
</script>
<style>
.completed {
text-decoration: line-through;
color: #888;
}
.todo-app {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin: 10px 0;
}
button {
margin-left: 10px;
}
</style>在 App.vue 中使用组件
修改 src/App.vue 文件：
<template>
<TodoList />
</template>
<script setup>
import TodoList from './components/TodoList.vue';
</script>运行项目
启动开发服务器：
npm run dev功能说明
- 添加任务：在输入框中输入内容后按回车键
- 标记完成：点击 "Toggle" 按钮切换任务完成状态
- 删除任务：点击 "Remove" 按钮删除任务
- 样式：已完成的任务会显示删除线和灰色文字
进阶改进建议
- 使用 Pinia 进行状态管理，实现多组件共享状态
- 添加本地存储功能，持久化保存任务数据
- 增加任务分类、优先级等功能
- 实现拖拽排序功能
- 添加动画效果提升用户体验
这个实现展示了 Vue 3 的基本用法，包括响应式数据、事件处理和条件样式绑定。可以根据需要进一步扩展功能。
