Nuxt/上一页和下一页的内容环绕

<template>
  <div>
    <div v-for="item in paginatedItems" :key="item.id">
      <!-- 显示每一页的内容 -->
      {{ item.content }}
    </div>
    <button @click="previousPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1, // 当前页数，默认为第一页
      pageSize: 10, // 每页显示的内容数量
      items: [...], // 所有需要分页显示的内容数据
    };
  },
  computed: {
    // 根据currentPage和pageSize计算当前页的内容数据
    paginatedItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.items.slice(startIndex, endIndex);
    },
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      const maxPage = Math.ceil(this.items.length / this.pageSize);
      if (this.currentPage < maxPage) {
        this.currentPage++;
      }
    },
  },
};
</script>