效果展示

HTML

<div class="page_bar no-select">
  <ul class="clearfix">
    <li class="iconfont"
        :class="{vh : currentPage === 1}"
        @click="subCurrentPage">&#xe660;</li>
    <li :class="{vh : currentPage <= showPageNumCeil}">...</li>
    <li v-for="item in showPageBarList"
        :key="item.id"
        :class="{current : item.id===currentPage}"
        @click="getCurrentPageNum(item.id)">{{item.id}}</li>
    <li :class="{vh : currentPage >= pageNum - (showPageNum - showPageNumCeil)}">...</li>
    <li class="iconfont"
        :class="{vh : currentPage === pageNum}"
        @click="addCurrentPage">&#xe65f;</li>
  </ul>
  <input type="text"
         ref="ipt"
         v-model="iptValue">/{{pageNum}}
  <button @click="getInputCurrentPage()">跳转</button>
</div>

数据需要

data () {
	return {
		// 总的数据
		dataList: [],
		// 数据分组
		totalPage: [],
		// 当前显示的数据
		dataShow: [],
		// 每页显示数量
		pageSize: 3,
		// 总页数
		pageNum: 1,
		// 当前页，默认第一页
		currentPage: 1,
		// 页码列表
		pageBarList: [],
		// 显示出来的页码数
		showPageNum: 5,
		// 显示页码中间值
		showPageNumCeil: 0,
		// 当前显示的页码列表
		showPageBarList: [],
		// 输入页码
		iptValue: ''
	};
},

函数需要

methods: {
    // 分页初始化
    pageInit () {
      // 计算总页数
      this.pageNum = Math.ceil(this.dataList.length / this.pageSize) || 1
      // 数据分组
      this.getTotalPage()
      // 获取当前显示的数据
      this.getDataShow()
      // 生成页码列表
      this.getpageBarList()
      // 获取显示页码中间值
      this.getShowPageNumCeil()
      // 获取显示出来的页码列表
      this.getShowPageBarList()
    },
    // 获取总页数
    getPageNum () {
      this.pageNum = Math.ceil(this.dataList.length / this.pageSize) || 1
    },
    // 获取分组数据
    getTotalPage () {
      for (let i = 0; i < this.pageNum; i++) {
        this.totalPage[i] = this.dataList.slice(this.pageSize * i, this.pageSize * (i + 1))
      }
    },
    // 获取当前显示的数据
    getDataShow () {
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    // 获取页码列表
    getpageBarList () {
      for (var i = 1; i <= this.pageNum; i++) {
        var obj = {
          id: i,
          state: false
        }
        this.pageBarList[this.pageBarList.length] = obj
      }
    },
    //  获取显示页码中间值
    getShowPageNumCeil () {
      this.showPageNumCeil = Math.ceil(this.showPageNum / 2)
    },
    // 获取当前显示的页码列表
    getShowPageBarList () {
      if (this.currentPage <= this.showPageNumCeil) {
        // 前项列表
        this.showPageBarList = this.pageBarList.slice(0, this.showPageNum)
      } else if (this.currentPage >= this.pageNum - (this.showPageNum - this.showPageNumCeil)) {
        // 后项列表
        this.showPageBarList = this.pageBarList.slice(this.pageNum - this.showPageNum, this.pageNum)
      } else {
        // 其他
        this.showPageBarList = this.pageBarList.slice(this.currentPage - this.showPageNumCeil, this.currentPage + this.showPageNum - this.showPageNumCeil)
      }
    },
    // 点击跳转页码
    getCurrentPageNum (num) {
      this.currentPage = num
    },
    // 后退一页
    subCurrentPage () {
      this.currentPage--
    },
    // 前进一页
    addCurrentPage () {
      this.currentPage++
    },
    // 获取输入的页码
    getInputCurrentPage () {
      // 输入有误处理
      if (1 <= this.iptValue && this.iptValue <= this.pageNum) {
        this.currentPage = Number(this.iptValue)
        this.iptValue = ''
      } else {
        alert('请输入正确的页码')
        this.iptValue = ''
      }
    }
  },

运用

  watch: {
    //当前页变化时，重新获取显示的数据和显示的页码
    currentPage: {
      handler () {
        this.getDataShow()
        this.getShowPageBarList()
      },
      immediate: true,
    }
  },
  created () {
    this.pageInit()
  },