Vue3.0实现一个任务清单ToDoList vue3小练习

## 功能包含

• 任务增加
• 任务查找
• 点击任务切换任务状态
• 下方按钮实现任务展示切换

总而言之实现了任务的增改查
template代码：

<template><div class="container"><h2>任务计划表</h2><!-- 添加框 --><div class="add">添加任务：<inputv-model="taskModel"type="text"placeholder="添加任务比如：吃饭睡觉打豆豆"/><button @click="addTask">确定添加</button></div><!-- 搜索框 --><div class="serch">查询任务：<inputv-model="searchData.searchModel"type="text"placeholder="查询自己的任务"/>&emsp;&emsp;&emsp;&nbsp;</div><!-- 任务列表 --><div class="list"><h4>任务列表</h4><ol><liv-for="item in taskFilter":key="item.id":class="{ active: !item.done }"@click="changeDone(item.id)">{{ item.cont }}</li></ol></div><!-- 任务选择 --><div class="option"><button @click="searchData.searchDone = 'all'">所有任务</button><button @click="searchData.searchDone = 'yes'">未完成任务</button><button @click="searchData.searchDone = 'no'">完成任务</button></div></div>
</template>

script代码

<script>
import { ref, reactive, computed } from "vue";
export default {setup(props) {let task = reactive([{ id: 0, cont: "吃饭", done: true },{ id: 1, cont: "吃饭2", done: true },{ id: 2, cont: "吃饭3", done: true },{ id: 3, cont: "吃饭4", done: true }]);//查找数据let searchData = reactive({searchModel: "",searchDone: "all", //all no yes});let taskModel = ref("");let idSum = 4;//添加任务function addTask() {const oneTask = {id: idSum,cont: taskModel,done: true,};idSum++;let temp = task.push(oneTask);if (temp) {alert("添加成功");}}//改变任务状态function changeDone(id) {task = task.map((item) => {if (item.id === id) {item.done = !item.done;return item;}return item;});//   console.log(task);}//计算属性筛选的值let taskFilter = computed(() => {let taskFilterT;switch (searchData.searchDone) {case "no":taskFilterT = task.filter((item) => {return item.cont.includes(searchData.searchModel) && !item.done;});break;case "yes":taskFilterT = task.filter((item) => {return item.cont.includes(searchData.searchModel) && item.done;});break;default:taskFilterT = task.filter((item) => {return item.cont.includes(searchData.searchModel);});break;}return taskFilterT;},{deep:true});return {task,addTask,taskModel,changeDone,searchData,taskFilter,};},
};
</script>

style样式

<style scoped lang="scss">
.container {width: 800px;margin: 30px auto;border: 1px solid black;
}
li {width: 500px;height: 20px;// border:  1px solid rgb(141, 108, 108);text-align: left;margin-left: 230px;
}
.active {text-decoration: line-through;
}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！