使用vue3实现todlist

在Vue 3中实现Todo List通常会涉及到组件化的设计和状态管理。以下是基本步骤：

1. **创建组件**：
- 定义一个`<template>`区域用于显示任务列表，包括每个任务的输入框、勾选框和删除按钮。

   <template>
     <div>
       <input v-model="newTask" placeholder="添加新任务">
       <button @click="addTask">添加</button>
       <ul>
         <li v-for="(task, index) in tasks" :key="index">
           <input type="checkbox" v-model="task.completed">
           <span>{{ task.text }}</span>
           <button @click="deleteTask(index)">删除</button>
         </li>
       </ul>
     </div>
   </template>

2. **数据绑定**：
- 在`<script>`部分声明数据属性，如`newTask`用于存储新的待办事项，`tasks`数组保存所有已完成和未完成的任务。

   <script setup>
   import { ref } from 'vue';

   const newTask = ref('');
   const tasks = ref([]);
   </script>

3. **方法实现**：
- `addTask`方法用于将新任务添加到数组中，并清除输入框。
- `deleteTask`方法接收任务索引作为参数，从数组中移除对应任务。

   <script setup>
   // ... (数据属性)

   function addTask() {
     if (newTask.value.trim()) {
       tasks.value.push({ text: newTask.value, completed: false });
       newTask.value = '';
     }
   }

   function deleteTask(index) {
     tasks.value.splice(index, 1);
   }
   </script>

4. **状态管理**（如果使用Vuex或Pinia）：
- 对于更复杂的应用，可以考虑使用状态管理库，如Vuex来集中管理数据和全局状态。

5. **组件注册和使用**：
- 将这个模板封装成一个名为`TodoList.vue`的组件，并在需要的地方通过`<todo-list>`标签使用它。

<template>
  <div>
    <!-- 其他内容 -->
    <todo-list />
  </div>
</template>

<script>
import TodoList from '@/components/TodoList.vue';
// ...
</script>