如何利用vue2做分页

1. 安装Vue.js

首先，你需要安装Vue.js。你可以通过以下命令进行安装：

npm install vue

2. 安装Vue.js分页组件

Vue.js有很多分页组件可用，例如vue-pagination、vue-paginator、vuejs-paginate等。你可以选择其中一个，也可以根据自己的需要自己编写分页组件。

以下是一个使用vue-pagination组件的示例：

首先，安装vue-pagination：

npm install vue-pagination

然后，在你的Vue.js组件中，导入vue-pagination：

import Pagination from 'vue-pagination';

在模板中使用vue-pagination：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <pagination :current="currentPage" :total="totalPages" @page-changed="onPageChanged"></pagination>
  </div>
</template>

在脚本中设置currentPage和totalPages：

<script>
import Pagination from 'vue-pagination';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      items: [], // 分页列表
      currentPage: 1, // 当前页码
      totalPages: 10, // 总页数
    };
  },
  methods: {
    onPageChanged(page) {
      // 当分页发生变化时
      this.currentPage = page;
      this.getItems();
    },
    getItems() {
      // 获取分页数据
      // ...
    },
  },
};
</script>

3. 实现分页功能

现在，你需要实现分页功能。首先，你需要获取分页数据。你可以使用Vue.js的生命周期钩子函数created来获取数据：

created() {
  this.getItems();
},

然后，在getItems方法中，你需要根据当前页码和每页显示的数据量来获取数据：

getItems() {
  const start = (this.currentPage - 1) * this.pageSize;
  const end = start + this.pageSize;
  this.items = this.allItems.slice(start, end);
},

allItems是包含所有数据的数组，pageSize是每页显示的数据量。

最后，当分页发生变化时，你需要重新获取数据：

onPageChanged(page) {
  this.currentPage = page;
  this.getItems();
},

这样，你就可以使用Vue.js和分页组件来实现分页功能了。