1
  <script setup lang="ts">
2
  import { ref } from "vue";
3

4
  //定义物品清单类型接口
5
  interface Todo {
6
      id: number;
7
      content: string;
8
      completed: boolean;
9
  }
10

11
  //任务内容
12
  const todo = ref("");
13
  const todos = ref<Todo[]>([]);
14

15
  //添加任务
16

17
  function addTodo() {
18
      const value = todo.value.trim();
19

20
      if (!value) return;
21

22
      todos.value.push({
23
          id: Date.now(),
24
          content: value,
25
          completed: false,
26
      });
27

28
      todo.value = "";
29
  }
30

31
  //切换任务状态
32

33
  function handleChange(id: number) {
34
      //查找点击的todo
35
      // find 必须返回boolean 值
36
      const item = todos.value.find((todo) => {
37
          return todo.id === id;
38
      });
39

40
      if (item) {
41
          item.completed = !item.completed;
42
      }
43

44
      console.log(todos.value);
45
  }
46
  </script>
47

48
  <template>
49
      <div class="todoApp">
50
          <div>
51
              <h1>Todolist</h1>
52

53
              <label>
54
                  <input type="text" v-model="todo" />
55
                  <button @click="addTodo()">添加任务</button>
56
              </label>
57
          </div>
58

59
          <div>
60
              <div>
61
                  <h2>待办清单</h2>
62
                  <ul>
63
                      <li v-for="todo in todos" :key="todo.id">
64
                          <span :class="{ completed: todo.completed }">{{
65
                              todo.content
66
                          }}</span>
67
                          <input
68
                              type="checkbox"
69
                              :checked="todo.completed"
70
                              @change="handleChange(todo.id)"
71
                          />
72
                      </li>
73
                  </ul>
74
              </div>
75
          </div>
76
      </div>
77
  </template>
78

79
  <style lang="css" scoped>
80
  .completed {
81
      text-decoration: line-through;
82
  }
83

84
  .todoApp {
85
      width: 200px;
86
      height: 200px;
87
      margin: 100px auto;
88
      text-align: center;
89
  }
90
  button {
91
      margin-top: 10px;
92
  }
93
  </style>