如何在Vue.js中进行上一次和下一次分页？

<template>
  <div>
    <!-- 展示当前页的数据 -->
    <div v-for="item in currentPageData" :key="item.id">
      {{ item.name }}
    </div>

    <!-- 上一页和下一页按钮 -->
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据条数
      totalData: [], // 所有数据
    };
  },
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.totalData.length / this.pageSize);
    },
    // 根据当前页码获取对应的数据
    currentPageData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.totalData.slice(startIndex, endIndex);
    },
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
  },
};
</script>