使用VUE2.0做一个简单的分页，过程很详细

好的，下面是使用 Vue 2.0 实现简单分页的步骤：

1. 在组件中定义数据

在组件的 `data` 中定义需要用到的数据，如当前页码、每页显示条数、总条数和数据列表等。

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0,
    list: []
  }
}

2. 定义方法获取数据

定义一个方法用于获取数据，该方法需要传入当前页码和每页显示条数，然后根据接口返回的数据更新数据列表和总条数。

// 使用 axios 发送请求获取数据
getData(page, size) {
  axios.get('/api/list', {
    params: {
      page,
      size
    }
  }).then(res => {
    this.list = res.data.list
    this.total = res.data.total
  })
}

3. 定义分页组件

定义一个分页组件，包含页码、上一页、下一页、跳转到指定页码等功能。

<template>
  <div class="pagination">
    <span class="page-item" :class="{disabled: currentPage === 1}" @click="prevPage">上一页</span>
    <span v-for="item in pages" :key="item" 
          :class="{active: item === currentPage}" 
          class="page-item" 
          @click="changePage(item)">{{ item }}</span>
    <span class="page-item" :class="{disabled: currentPage === totalPage}" @click="nextPage">下一页</span>
    <div class="page-jump">
      跳转到<input type="text" v-model="jumpPage">页
      <button @click="jumpToPage">确定</button>
    </div>
  </div>
</template>

4. 实现分页组件逻辑

定义计算属性 `pages`，根据当前页码和总条数计算出需要显示的页码数组。

computed: {
  // 计算需要显示的页码
  pages() {
    const pageArr = []
    const totalPage = Math.ceil(this.total / this.pageSize)
    let start, end
    if (totalPage <= 7) {
      start = 1
      end = totalPage
    } else {
      if (this.currentPage <= 4) {
        start = 1
        end = 7
      } else if (this.currentPage >= totalPage - 3) {
        start = totalPage - 6
        end = totalPage
      } else {
        start = this.currentPage - 3
        end = this.currentPage + 3
      }
    }
    for (let i = start; i <= end; i++) {
      pageArr.push(i)
    }
    return pageArr
  }
},

定义方法 `changePage`，用于改变当前页码，并重新获取数据。

methods: {
  // 改变页码
  changePage(page) {
    this.currentPage = page
    this.getData(this.currentPage, this.pageSize)
  },
  // 上一页
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
      this.getData(this.currentPage, this.pageSize)
    }
  },
  // 下一页
  nextPage() {
    if (this.currentPage < this.totalPage) {
      this.currentPage++
      this.getData(this.currentPage, this.pageSize)
    }
  },
  // 跳转到指定页码
  jumpToPage() {
    const jumpPage = parseInt(this.jumpPage)
    if (jumpPage >= 1 && jumpPage <= this.totalPage) {
      this.currentPage = jumpPage
      this.getData(this.currentPage, this.pageSize)
    }
  }
}

5. 使用分页组件

在组件的模板中引入分页组件，并传入需要用到的数据和方法即可。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
    <pagination :current-page="currentPage" :page-size="pageSize" :total="total" @change-page="changePage" />
  </div>
</template>

以上就是使用 Vue 2.0 实现简单分页的步骤，具体的实现可以根据自己的需求进行调整。