用vue实现一个分页功能

在Vue中实现分页功能需要以下步骤：

1. 定义页码数和每页显示的数据数量

2. 在Vue的data选项中定义这些数据，例如：

data () {
  return {
    currentPage: 1,
    perPage: 10
  }
}

3. 使用一个计算属性将数据分页，例如：

computed: {
  pagedData () {
    let start = (this.currentPage - 1) * this.perPage
    let end = start + this.perPage
    return this.data.slice(start, end)
  }
}

4. 使用分页组件，并绑定数据和方法，例如：

<template>
  <div>
    <ul>
      <li v-for="item in pagedData">{{ item }}</li>
    </ul>
    <pagination
      :total="data.length"
      :per-page="perPage"
      :current-page="currentPage"
      @pagination="setPage"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      perPage: 10,
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
    }
  },
  computed: {
    pagedData () {
      let start = (this.currentPage - 1) * this.perPage
      let end = start + this.perPage
      return this.data.slice(start, end)
    }
  },
  methods: {
    setPage (page) {
      this.currentPage = page
    }
  }
}
</script>

以上代码仅作为示例，您可以根据需要自行定制和修改。