分页效果

html部分

  <div class="page_header">
             <div class="shou">共{{zong_all}}条记录</div>
           <div class="page-bar">
             <ul>
               <li v-on:click="btnClick(1)"><a>首页</a></li>
               <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
               <li v-if="cur==1"><a class="banclick">上一页</a></li>
               <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
                 <a v-on:click="btnClick(index)">{{ index }}</a>
               </li>
               <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
               <li v-if="cur == all"><a class="banclick">下一页</a></li>
               <li><a v-on:click="moClick" >末页</a></li>
               <!--<li><a>共<i>{{all}}</i>页</a></li>-->
             </ul>
           </div>
           </div>

js部分

computed: {
      indexs: function(){
        var left = 1;
        var right = this.all;
        var ar = [];
        if(this.all>= 5){
          if(this.cur > 3 && this.cur < this.all-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 ++
        }
        return ar
      }

    },

点击事件部分

btnClick: function(data){//页码点击事件
      this.cur = data
      this.list=this.lists.slice(((data)*10)-10,(data)*10)
    if(data==1){
        this.numbs=data

    }else{
      this.numbs=((data-1)*10)+1
    }
  },
  pageClick: function(){
    console.log(((this.cur)*10)-10)
    console.log((this.cur)*10)
    this.list=this.lists.slice(((this.cur)*10)-10,(this.cur)*10)
    console.log(this.list)
    console.log('现在在'+this.cur+'页');
    if(this.cur==1){
      this.numbs=this.cur

    }else{
      this.numbs=((this.cur-1)*10)+1
    }

  },
  moClick: function(){//页码点击事件
    if(this.lists.length % 10==0){
      this.cur=Math.floor(this.lists.length/10)
      this.list=this.lists.slice(((this.cur)*10)-10,(this.cur)*10)
      this.numbs=((this.cur-1)*10)+1
    }else{
      this.cur=(Math.floor(this.lists.length/10))+1
      this.numbs=((this.cur-1)*10)+1
      this.list=this.lists.slice(((this.cur)*10)-10,(this.cur)*10)
    }

  },

css部分

.page-bar{
display: inline-block;
margin: 20px 0px;
  height: 23px;
  font-size: 13px;
}
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 #248DE4;
  text-decoration: none;
  position: relative;

  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #cccccc;
  cursor: pointer
}
.page-bar a:hover{
  background-color: #0a4253;
}
.page-bar li{
   float: left;
 }
.page-bar a.banclick{
  cursor:not-allowed;
}
.page-bar .active a{
  color: #cccccc;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i{
  font-style:normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
.page_header{
  width:100%;
  /*background-color: red;*/

}
.shou{
  display: inline-block;
 position: relative;
  top: -30px;
  right: 10px;
  color: #cccccc;
  font-size: 13px;
}