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

## 功能包含

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

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

<template>
  <div class="container">
    <h2>任务计划表</h2>
    <!-- 添加框 -->
    <div class="add">
      添加任务：<input
        v-model="taskModel"
        type="text"
        placeholder="添加任务比如：吃饭睡觉打豆豆"
      />
      <button @click="addTask">确定添加</button>
    </div>
    <!-- 搜索框 -->
    <div class="serch">
      查询任务：
      <input
        v-model="searchData.searchModel"
        type="text"
        placeholder="查询自己的任务"
      />
      &emsp;&emsp;&emsp;&nbsp;
    </div>
    <!-- 任务列表 -->
    <div class="list">
      <h4>任务列表</h4>
      <ol>
        <li
          v-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>