使用vue3写一个任务便签管理

好的，我可以为您提供一个简单的任务便签管理的Vue 3示例代码。

首先，我们需要创建一个Vue组件来显示任务便签：

<template>
  <div class="task">
    <div class="task-header">
      <input type="checkbox" v-model="isChecked" @change="toggleTask" />
      <span>{{ title }}</span>
      <button @click="$emit('delete')">删除</button>
    </div>
    <div class="task-body">
      {{ description }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      required: true,
    },
    isChecked: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleTask() {
      this.$emit('toggle', !this.isChecked);
    },
  },
};
</script>

<style scoped>
.task {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.task-header {
  display: flex;
  align-items: center;
}

.task-header button {
  margin-left: auto;
}
</style>

这个组件接受三个属性：`title`，`description`和`isChecked`。`isChecked`表示任务是否已完成，我们用一个复选框来显示它。`task-header`包含了复选框、标题和删除按钮。`task-body`用来显示任务的描述信息。

接下来，我们需要创建一个父组件来管理任务便签：

<template>
  <div class="task-list">
    <h2>任务列表</h2>
    <div v-if="tasks.length === 0">无任务</div>
    <div v-else>
      <task
        v-for="(task, index) in tasks"
        :key="index"
        :title="task.title"
        :description="task.description"
        :is-checked="task.isChecked"
        @toggle="toggleTask(index, $event)"
        @delete="deleteTask(index)"
      />
    </div>
    <div>
      <input type="text" v-model="newTask.title" placeholder="任务标题" />
      <textarea v-model="newTask.description" placeholder="任务描述"></textarea>
      <button @click="addTask">添加任务</button>
    </div>
  </div>
</template>

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

export default {
  components: { Task },
  data() {
    return {
      tasks: [
        { title: '任务1', description: '任务1的描述', isChecked: false },
        { title: '任务2', description: '任务2的描述', isChecked: true },
        { title: '任务3', description: '任务3的描述', isChecked: false },
      ],
      newTask: {
        title: '',
        description: '',
      },
    };
  },
  methods: {
    toggleTask(index, isChecked) {
      this.tasks[index].isChecked = isChecked;
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    },
    addTask() {
      if (this.newTask.title !== '' && this.newTask.description !== '') {
        this.tasks.push({
          title: this.newTask.title,
          description: this.newTask.description,
          isChecked: false,
        });
        this.newTask.title = '';
        this.newTask.description = '';
      }
    },
  },
};
</script>

<style scoped>
.task-list {
  max-width: 800px;
  margin: 0 auto;
}

.task-list input,
.task-list textarea {
  display: block;
  margin-bottom: 10px;
}
</style>

这个组件包含一个任务列表，可以添加、删除和切换任务的完成状态。我们使用`v-for`指令来显示所有的任务便签，并将任务的标题、描述和完成状态通过属性传递给子组件`Task`。添加任务的表单包含一个输入框和一个文本域，当用户提交表单时，我们将新任务添加到列表中。

现在，我们已经完成了一个简单的任务便签管理应用程序，您可以根据需要进行修改和扩展。