vue实现前端分页完整代码

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

首先，做出来的效果如图所示，具体的Ajax请求数据可以写在点击函数中
分页效果算是比较费脑子的，里面计算有些麻烦，本文上完整代码，一起学习进步

• “上一页”写两个li元素，如果已经是第一页，那么就禁止鼠标点击，如果不是就curr减减，并且可以点击
• 同理“下一页”也一样
• 中间部分是通过indexs循环，indexs通过computed计算得出
  

  

    
上一页
    
上一页
    
    

      {{ index }}
    
    
下一页
    
共{{all}}页
  

难点就是IF嵌套语句

1、每次显示5个数据，如果大于3，范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值，所以最大范围到6
2、如果是大于6，那么最大值就是最大值，最小变成all-4
3、如果3以内，默认不跳动

var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 8, //总页数
    cur: 1//当前页码
  },
  watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  },  
   methods: {
    btnClick: function(data){
      if(data != this.cur){
 this.cur = data;
      }
    },
    pageClick: function(){
      console.log('现在在'+this.cur+'页');
    }
  },
  computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      //这里最大范围从3到6，如果到达7，那么下边加2变成9，已经超过最大的范围值
      if(this.cur > 3 && this.cur < this.all-1){
//以4为参考基准，左面加2右边加2
   left = this.cur - 2
   right = this.cur + 2
      }else{
 if(this.cur<=3){
   left = 1
   right = 5
 }else{
   right = this.all
   left = this.all -4
 }
      }
     }
    while (left <= right){
      ar.push(left)
      left ++
    }
    console.log(ar);
    return ar
    }
  }
})

全部代码：

.page-bar{
  margin:40px;
}
ul,li{
  margin: 0px;
  padding: 0px;
}
li{
  list-style: none
}
.page-bar li:first-child>a {
  margin-left: 0px
}
.page-bar a{
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer
}
.page-bar a:hover{
  background-color: #eee;
}
.page-bar a.banclick{
  cursor:not-allowed;
}
.page-bar .active a{
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i{
  font-style:normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}



 
  

    
上一页
    
上一页
    
    

      {{ index }}
    
    
下一页
    
共{{all}}页
  

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