基于vue.js的分页插件详解

<div class="page-bar" v-else> 
    <ul> 
      <li style="width: 11%" v-if="showFirst"> 
        <a v-on:click="cur--"> 
          <<</a> 
      </li> 
      <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> 
        <a v-on:click="btnClick(index)">{{index}}</a> 
      </li> 
      <li style="width: 11%" v-if="showLast"><a v-on:click="cur++"> >></a></li> 
      <li style="width: 22%;margin-left: 7%"><a>共<i>{{all}}</i>页</a></li> 
    </ul> 
  </div> 

.page-bar { 
    margin-top: 21px; 
    margin-left: 11%; 
  } 
   
  .page-bar ul, 
  .page-bar li { 
    margin: 0px; 
    padding: 0px; 
  } 
   
  .page-bar ul li { 
    list-style: none; 
    border: 1px solid #ddd; 
    text-decoration: none; 
    position: relative; 
    float: left; 
    text-align: center; 
    padding: 1px 0; 
    margin-left: -1px; 
    line-height: 1.42857143; 
    color: #337ab7; 
    cursor: pointer; 
    width: 8%; 
  } 
   
  .page-bar li:first-child>a { 
    margin-left: 0px 
  } 
   
  .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; 
  } 

var vm = new Vue({ 
  el: 'body', 
  data: { 
    list: null, 
    all: 1, //总页数 
    cur: 1, //当前页码 
  }, 

 computed: { 
   indexs: function(index) { 
    var left = 1; 
    var right = this.all; 
    var ar = []; 
    if (this.all >= 11) { 
     if (this.cur > 5 && this.cur < this.all - 4) { 
      left = this.cur - 5; 
      right = this.cur + 4; 
     } else { 
      if (this.cur <= 5) { 
       left = 1; 
       right = 10; 
      } else { 
       right = this.all; 
       left = this.all - 9; 
      } 
     } 
    } 
    while (left <= right) { 
     ar.push(left); 
     left++; 
    } 
    return ar; 
   }, 
   showLast: function() { 
    if (this.cur == this.all) { 
     return false 
    } 
    return true 
   }, 
   showFirst: function() { 
    if (this.cur == 1) { 
     return false 
    } 
    return true 
   } 
  } 

methods: { 
  btnClick: function(items) { //页码点击事件 
    if (items != this.cur) { 
      this.cur = items 
    } 
  } 
}, 

 watch: { 
  cur: function(oldValue, newValue) { 
   console.log(arguments) 
   
  } 
 }