Vue前端实现分页功能

<template>
  <div>
    <div v-for="(item, index) in paginatedData" :key="index">
      {{ item }}
    </div>
 
    <button @click="currentPage--" :disabled="currentPage <= 1">Prev</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <button @click="currentPage++" :disabled="currentPage >= totalPages">Next</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dataList: [...], // 你的数据数组
      currentPage: 1,
      pageSize: 10 // 每页显示的数量
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.dataList.length / this.pageSize);
    },
    // 计算当前页面的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.dataList.slice(start, end);
    }
  }
};
</script>