vue3实现待办事项

在 Vue 3 中实现一个简单的待办事项应用，可以使用组件化和数据绑定来构建。首先，创建一个基础的 Vue 组件 `TodoItem.vue`，它将包含待办事项的标题、完成状态以及删除按钮：

<template>
  <div class="todo-item">
    <input type="text" v-model="title" placeholder="添加任务...">
    <switch v-model="isDone" @change="toggleDone"></switch>
    <button @click="deleteTodo">删除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      isDone: false,
    };
  },
  methods: {
    toggleDone() {
      this.isDone = !this.isDone;
    },
    deleteTodo() {
      // 这里你可以添加实际删除逻辑，比如从数组中移除元素
      console.log('删除了 todo:', this.title);
    },
  },
};
</script>

<style scoped>
.todo-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>

然后，创建一个列表组件 `TodoList.vue` 来展示并管理这些待办事项：

<template>
  <ul class="todo-list">
    <li v-for="(item, index) in todos" :key="index">
      {{ item.title }} ({{ item.isDone ? '已完成' : '未完成' }})
      <TodoItem v-if="item.isDone" :data="item" @delete="removeTodo(index)"></TodoItem>
    </li>
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: { TodoItem },
  data() {
    return {
      todos: [],
    };
  },
  methods: {
    addTodo(title) {
      this.todos.push({ title, isDone: false });
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

在这个例子中，我们使用了 Vue 的 `v-model` 和 `v-for` 指令，还有自定义事件 `@delete` 来处理删除操作。当用户输入任务并按下回车或者切换完成状态时，数据会自动更新。