vue前端分页功能怎么实现

// Vue前端分页功能实现示例代码

<template>
  <div>
    <!-- 分页数据展示 -->
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>

    <!-- 分页控制按钮 -->
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设这是从后端获取的数据
      allData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' },
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' },
        { id: 10, name: 'Item 10' }
      ],
      pageSize: 3, // 每页显示的条数
      currentPage: 1 // 当前页码
    };
  },
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize);
    },
    // 计算当前页要显示的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.allData.slice(start, end);
    }
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行调整 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用 v-for 指令遍历 paginatedData，即当前页要显示的数据，并将其渲染为列表项。
   • 提供了两个按钮用于切换页面：上一页 和 下一页。同时显示当前页码和总页数。

2. 脚本部分 (<script>)：

   • data 中定义了所有数据 allData、每页显示的条数 pageSize 和当前页码 currentPage。
   • computed 中计算了总页数 totalPages 和当前页要显示的数据 paginatedData。
   • methods 中定义了 prevPage 和 nextPage 方法，用于切换页面。

3. 样式部分 (<style scoped>)：

   • 可以根据需要自定义样式。

通过这种方式，你可以轻松实现一个简单的分页功能。