好的，以下是一个简单的示例代码：
```vue
<template>
<div>
<h1>任务便签管理</h1>
<div>
<
input type="text" v-model="newTask" placeholder="
添加任务"/>
<button @click="addTask">
添加</button>
</div>
<ul>
<li v-for="(task, index) in currentTasks" :key="index">
<span :class="{completed: task.completed}" @click="toggleTask(index)">
{{ task.content }}
</span>
<button @click="deleteTask(index)">删除</button>
</li>
</ul>
<div>
<button @click="clearCompletedTasks">
清除已完成任务</button>
</div>
<div>
<button @click="previousPage" :disabled="currentPage === 1">上一页</button>
<span>{{ currentPage }}/{{ totalPages }}</span>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
<div>
<p>已完成任务：{{ completedTasksCount }} 个</p>
<p>未完成任务：{{ uncompletedTasksCount }} 个</p>
<p>总任务数：{{ totalTasksCount }} 个</p>
</div>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
name: 'TaskList',
setup() {
const tasks = ref([
{ content: '学习 Vue', completed: false },
{ content: '写作业', completed: false },
{ content: '锻炼身体', completed: true },
{ content: '看书', completed: false },
{ content: '听音乐', completed: true },
{ content: '睡觉', completed: false },
]);
const newTask = ref('');
const currentPage = ref(1);
const pageSize = 3;
const currentTasks = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize;
return tasks.value.slice(startIndex, startIndex + pageSize);
});
const totalPages = computed(() => Math.ceil(tasks.value.length / pageSize));
const completedTasksCount = computed(() => {
return tasks.value.filter((task) => task.completed).length;
});
const uncompletedTasksCount = computed(() => {
return tasks.value.filter((task) => !task.completed).length;
});
const totalTasksCount = computed(() => tasks.value.length);
function addTask() {
if (newTask.value.trim() === '') {
return;
}
tasks.value.push({ content: newTask.value, completed: false });
newTask.value = '';
}
function toggleTask(index) {
tasks.value[index].completed = !tasks.value[index].completed;
}
function deleteTask(index) {
tasks.value.splice(index, 1);
}
function clearCompletedTasks() {
tasks.value = tasks.value.filter((task) => !task.completed);
}
function previousPage() {
currentPage.value--;
}
function nextPage() {
currentPage.value++;
}
return {
tasks,
newTask,
currentPage,
currentTasks,
totalPages,
completedTasksCount,
uncompletedTasksCount,
totalTasksCount,
addTask,
toggleTask,
deleteTask,
clearCompletedTasks,
previousPage,
nextPage,
};
},
};
</script>
<style>
.completed {
text-decoration: line-through;
}
</style>
```
这个示例实现了
添加任务、
标记任务已完成/未完成、删除任务、
清除未完成任务、实现翻页功能、统计功能。注意，这只是一个简单的示例，实际项目中可能需要更多的功能和优化。
2163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
