使用vue3写一个任务便签管理能够实现添加任务、标记任务已完成/未完成、删除任务、清除未完成任务、实现翻页功能、统计功能。

好的，以下是一个简单的示例代码：

<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>

这个示例实现了添加任务、标记任务已完成/未完成、删除任务、清除未完成任务、实现翻页功能、统计功能。注意，这只是一个简单的示例，实际项目中可能需要更多的功能和优化。