vue前端分页

Vue前端分页可以通过以下步骤实现：

1. 在Vue组件中定义一个数组，用于存放所有数据。
2. 定义一个变量，用于存放每页显示的数据条数。
3. 定义一个变量，用于存放当前页码。
4. 定义一个计算属性，用于计算总页数。
5. 定义一个方法，用于获取当前页的数据。
6. 在页面中显示当前页的数据。
7. 定义上一页和下一页的方法，用于切换页码。
8. 在页面中显示分页组件，包括上一页、下一页、页码等。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData">{{ item }}</li>
    </ul>
    <div>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10'],
      pageSize: 3,
      currentPage: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.dataList.length / this.pageSize)
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.dataList.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

在这个例子中，我们通过计算属性`totalPages`计算出总页数，然后通过方法`currentPageData`获取当前页的数据。通过按钮调用方法`prevPage`和`nextPage`来切换页码。在页面中，我们显示当前页的数据，并显示上一页、下一页和页码等信息。