当海风翻页时

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

4
interface Todo {
5
  id: number
6
  content: string
7
  completed: boolean
8
}
9

10
// 输入框绑定的新任务内容
11
const newTodo = ref('')
12
const todos = ref<Todo[]>([])
13

14
function addTodo() {
15
  const value = newTodo.value.trim()
16
  if (!value) return
17

18
  todos.value.push({
19
    id: Date.now(),
20
    content: value,
21
    completed: false,
22
  })
23

24
  newTodo.value = ''
25
}
26

27
function handleChange(id: number) {
28
  // find 的谓词返回布尔真值；find 本身返回匹配到的元素，找不到则返回 undefined
29
  const item = todos.value.find((todo) => todo.id === id)
30

31
  if (item) {
32
    item.completed = !item.completed
33
  }
34
}
35
</script>
36

37
<template>
38
  <div class="todo-app">
39
    <h1>Todolist</h1>
40

41
    <label>
42
      <input type="text" v-model="newTodo" />
43
      <button @click="addTodo()">添加任务</button>
44
    </label>
45

46
    <h2>待办清单</h2>
47
    <ul>
48
      <li v-for="todo in todos" :key="todo.id">
49
        <span :class="{ completed: todo.completed }">{{ todo.content }}</span>
50
        <input
51
          type="checkbox"
52
          :checked="todo.completed"
53
          @change="handleChange(todo.id)"
54
        />
55
      </li>
56
    </ul>
57
  </div>
58
</template>
59

60
<style scoped>
61
.completed {
62
  text-decoration: line-through;
63
}
64

65
.todo-app {
66
  width: 200px;
67
  height: 200px;
68
  margin: 100px auto;
69
  text-align: center;
70
}
71

72
button {
73
  margin-top: 10px;
74
}
75
</style>