<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" >上一頁(yè)</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" >下一頁(yè)</a>
   </li>
  </ul>
 </script>
 <div id="app">
  <page></page>
 </div>

 <script>
  Vue.component("page", {
   template: "#page",
   data: function () {
    return {
     current: 1, // 當(dāng)前頁(yè)碼
     showItem: 5, // 最少顯示5個(gè)頁(yè)碼
     allpage: 13 // 總共的
    }
   },
   computed: {
    pages: function () {
     var pag = [];
     if (this.current < this.showItem) { //如果當(dāng)前的激活的項(xiàng) 小于要顯示的條數(shù)
      //總頁(yè)數(shù)和要顯示的條數(shù)那個(gè)大就顯示多少條
      var i = Math.min(this.showItem, this.allpage);
      while (i) {
       pag.unshift(i--);
      }
     } else { //當(dāng)前頁(yè)數(shù)大于顯示頁(yè)數(shù)了
      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;
     //這里可以發(fā)送ajax請(qǐng)求
    }
   }
  })
  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;
  }