基于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)    }  }