基于vue.js实现的分页

<script type="text/x-template" id="page">  <ul class="pagination">   <li v-show="current != 1" @click="current-- && goto(current)">    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>   </li>   <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{index}}</a>   </li>   <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>   </li>  </ul> </script> <div id="app">  <page></page> </div>

 <script>  Vue.component("page", {   template: "#page",   data: function () {    return {     current: 1, // 当前页码     showItem: 5, // 最少显示5个页码     allpage: 13 // 总共的    }   },   computed: {    pages: function () {     var pag = [];     if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数      //总页数和要显示的条数那个大就显示多少条      var i = Math.min(this.showItem, this.allpage);      while (i) {       pag.unshift(i--);      }     } else { //当前页数大于显示页数了      var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始       i = this.showItem;      if (middle > (this.allpage - this.showItem)) {       middle = (this.allpage - this.showItem) + 1      }      while (i--) {       pag.push(middle++);      }     }     return pag    }   },   methods: {    goto: function (index) {     if (index == this.current) return;     this.current = index;     //这里可以发送ajax请求    }   }  })  var vm = new Vue({   el: '#app',  }) </script>

 body {   font-family: "Segoe UI";  }  li {   list-style: none;  }  a {   text-decoration: none;  }  .pagination {   position: relative;  }  .pagination li {   display: inline-block;   margin: 0 5px;  }  .pagination li a {   padding: .5rem 1rem;   display: inline-block;   border: 1px solid #ddd;   background: #fff;   color: #0E90D2;  }  .pagination li a:hover {   background: #eee;  }  .pagination li.active a {   background: #0E90D2;   color: #fff;  }