好的，我可以为您提供一个简单的
任务便签管理的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`。添加
任务的表单包含一个输入框和一个文本域，当用户提交表单时，我们将新
任务添加到列表中。
现在，我们已经完成了一个简单的
任务便签管理应用程序，您可以根据需要进行修改和扩展。
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
