vue分页插件的使用方法

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下

分页插件代码：

  
   
      上一页
      5" class="jump" @click="jumpPage(1)">1
      ...
      {{num}}
      ...
 
      下一页
      {{pages}}
 
     <#--跳转到：-->
     <#---->
     <#--GO-->
   
  

vue代码

data: {
  current_page: result.resultObj.number + 1, //当前页
  pages: result.resultObj.totalPages, //总页数
  changePage: '',//跳转页
  nowIndex: 0
    },
  computed: {
    show: function () {
     return this.pages && this.pages != 1
   },
  pstart: function () {
    return this.current_page == 1;
   },
  pend: function () {
    return this.current_page == this.pages;
     },
   efont: function () {
    if (this.pages <= 7) return false;
      return this.current_page > 5
     },
   ebehind: function () {
      if (this.pages <= 7) return false;
      var nowAy = this.indexs;
      return nowAy[nowAy.length - 1] != this.pages;
     },
    indexs: function () {
 
      var left = 1,
 right = this.pages,
 ar = [];
   if (this.pages >= 7) {
     if (this.current_page > 5 && this.current_page < this.pages -4）{
 left = Number(this.current_page) - 3;
 right = Number(this.current_page) + 3;
} else {
 if (this.current_page <= 5) {
  left = 1;
  right = 7;
 } else {
  right = this.pages;
 
  left = this.pages - 6;
 }
}
      }
    while (left <= right) {
ar.push(left);
left++;
      }
      return ar;
     },
    },
    methods: {
     jumpPage: function (id) {
      if (id <= this.pages && id >= 1) {
this.current_page = id;
loadData(this.current_page - 1, size);
      }
     },
    lessPage: function () {
      this.current_page--;
      loadData(this.current_page - 1, size);
     },
    addPage: function () {
      this.current_page++;
      loadData(this.current_page - 1, size);
   }
}

使用说明：

直接拷贝即可使用，只需要修改总页数、当前页。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。