用vue3写一个todo案例

好的，下面是一个用 Vue3 写的基本的 TodoList 案例：

<template>
  <div class="todo">
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" placeholder="Add a new todo">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ completed: todo.done }">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      todos: [],
      newTodo: '',
    });

    function addTodo() {
      if (state.newTodo.trim() === '') return;
      state.todos.push({
        text: state.newTodo,
        done: false,
      });
      state.newTodo = '';
    }

    function deleteTodo(index) {
      state.todos.splice(index, 1);
    }

    return {
      ...state,
      addTodo,
      deleteTodo,
    };
  },
};
</script>

<style>
.completed {
  text-decoration: line-through;
}
</style>

这个 TodoList 组件有一个输入框和一个添加按钮，用于添加新的待办事项。已经添加的待办事项会显示在一个列表中，每个待办事项都有一个复选框和一个删除按钮。用户可以勾选复选框来标记已完成的任务，也可以点击删除按钮来删除任务。