前端 vue 中 数组有30对象,做分页,一个页面显示10个,分3页 如何制作

在 Vue.js 中实现数组分页，你可以按照以下步骤操作：

1. **数据结构**：
首先，你需要有一个包含所有对象的数组 `items` 和两个变量用于管理当前页数和每页的数量，例如 `currentPage`, `pageSize` 分别设置为 1 和 10。

data() {
  return {
    items: [...], // 你的30个对象组成的数组
    currentPage: 1,
    pageSize: 10,
    allPages: Math.ceil(items.length / pageSize), // 总页数
  };
},

2. **分页函数**：
创建一个名为 `getPaginatedItems` 的方法，用于根据当前页获取相应的切片数据。

methods: {
  getPaginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.items.slice(start, end);
  },
}

3. **模板渲染**：
在 HTML 模板中，使用 `v-for` 来遍历每一页的内容，并提供分页导航。

<div v-for="item in getPaginatedItems()">
  <!-- 渲染每个对象 -->
</div>

<!-- 分页组件 -->
<template>
  <ul class="pagination">
    <li v-for="page in getPaginationButtons()" :key="page" @click="setPage(page)">
      {{ page }}
    </li>
  </ul>
</template>

<script>
methods: {
  ...,
  getPaginationButtons() {
    return Array.from({ length: this.allPages }, (_, index) => index + 1); // 返回1到总页数
  },
  setPage(pageNumber) {
    if (pageNumber > 0 && pageNumber <= this.allPages) {
      this.currentPage = pageNumber;
    }
  },
},
</script>

4. **事件监听或路由控制**：
如果你想通过点击事件或其他交互来切换页，可以在按钮上绑定 `@click` 事件并调用 `setPage` 方法。如果这是在一个单页应用中的路由场景，还可以在路由守卫里处理页码的改变。