nuxt同一个页面两个分页完整实列代码

以下是一个使用 Nuxt.js 实现的同一个页面中两个分页的完整代码示例：

<template>
  <div>
    <h2>分页1</h2>
    <ul>
      <li v-for="(item, index) in currentPageOneData" :key="index">
        {{ item }}
      </li>
    </ul>
    <nav>
      <ul>
        <li v-if="currentPageOne > 1" @click="changePageOne(currentPageOne - 1)">
          上一页
        </li>
        <li v-for="page in totalPagesOne" :key="page" @click="changePageOne(page)" :class="{ active: page === currentPageOne }">
          {{ page }}
        </li>
        <li v-if="currentPageOne < totalPagesOne" @click="changePageOne(currentPageOne + 1)">
          下一页
        </li>
      </ul>
    </nav>

    <h2>分页2</h2>
    <ul>
      <li v-for="(item, index) in currentPageTwoData" :key="index">
        {{ item }}
      </li>
    </ul>
    <nav>
      <ul>
        <li v-if="currentPageTwo > 1" @click="changePageTwo(currentPageTwo - 1)">
          上一页
        </li>
        <li v-for="page in totalPagesTwo" :key="page" @click="changePageTwo(page)" :class="{ active: page === currentPageTwo }">
          {{ page }}
        </li>
        <li v-if="currentPageTwo < totalPagesTwo" @click="changePageTwo(currentPageTwo + 1)">
          下一页
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalDataOne: [], // 分页1的总数据
      currentPageOne: 1, // 分页1的当前页码
      perPageOne: 5, // 分页1的每页显示数量
      totalDataTwo: [], // 分页2的总数据
      currentPageTwo: 1, // 分页2的当前页码
      perPageTwo: 10 // 分页2的每页显示数量
    }
  },
  computed: {
    totalPagesOne() {
      return Math.ceil(this.totalDataOne.length / this.perPageOne)
    },
    currentPageOneData() {
      const start = (this.currentPageOne - 1) * this.perPageOne
      const end = start + this.perPageOne
      return this.totalDataOne.slice(start, end)
    },
    totalPagesTwo() {
      return Math.ceil(this.totalDataTwo.length / this.perPageTwo)
    },
    currentPageTwoData() {
      const start = (this.currentPageTwo - 1) * this.perPageTwo
      const end = start + this.perPageTwo
      return this.totalDataTwo.slice(start, end)
    }
  },
  methods: {
    changePageOne(page) {
      this.currentPageOne = page
    },
    changePageTwo(page) {
      this.currentPageTwo = page
    }
  },
  mounted() {
    this.totalDataOne = Array.from({ length: 20 }, (_, i) => `分页1的数据${i + 1}`)
    this.totalDataTwo = Array.from({ length: 50 }, (_, i) => `分页2的数据${i + 1}`)
  }
}
</script>

在这个示例代码中，我们需要对分页1和分页2的总数据、当前页码以及每页显示数量进行定义和初始化，然后通过计算属性来计算总页数和当前页的数据。在模板中，我们使用 v-for 来渲染每个分页的数据列表，使用 v-if 和 @click 来实现分页的上一页和下一页操作，使用 :class 来动态设置当前页的样式。最后，我们通过 mounted 钩子函数来初始化两个分页的总数据。