vue实现任务清单
使用 Vue 实现任务清单
初始化 Vue 项目
通过 Vue CLI 或 Vite 创建一个新项目，安装 Vue 3 及相关依赖。确保项目环境配置正确。
npm init vue@latest task-list
cd task-list
npm install创建任务组件
在 src/components 目录下创建 TaskList.vue 文件，定义任务列表的基本结构和逻辑。
<template>
<div>
<h3>任务清单</h3>
<input v-model="newTask" @keyup.enter="addTask" placeholder="添加新任务" />
<ul>
<li v-for="(task, index) in tasks" :key="index">
<span :class="{ completed: task.completed }">{{ task.text }}</span>
<button @click="toggleTask(index)">完成</button>
<button @click="removeTask(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTask: '',
tasks: []
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push({ text: this.newTask, completed: false });
this.newTask = '';
}
},
toggleTask(index) {
this.tasks[index].completed = !this.tasks[index].completed;
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
};
</script>
<style>
.completed {
text-decoration: line-through;
color: gray;
}
</style>集成到主应用
在 src/App.vue 中引入并使用 TaskList 组件。
<template>
<div id="app">
<TaskList />
</div>
</template>
<script>
import TaskList from './components/TaskList.vue';
export default {
components: {
TaskList
}
};
</script>运行项目
启动开发服务器，查看任务清单功能是否正常工作。
npm run dev功能扩展
- 本地存储：使用
localStorage持久化任务数据，避免刷新后丢失。 - 任务分类：添加优先级或标签功能，支持按条件筛选任务。
- 动画效果：通过 Vue 的过渡动画增强交互体验。
- 后端集成：连接 API 实现数据同步，支持多设备访问。
通过以上步骤，可以快速实现一个基础的 Vue 任务清单应用，并根据需求进一步扩展功能。
