Vue 實用分頁組件paging（頁數太多時顯示省略號）

2017年6.26更新：

以前的版本在頁數太多時依然每一頁都顯示，這顯然不合理。加強版在頁數太多時會顯示省略號，且把分頁組件單獨提取出來，能夠直接在其餘頁面引入使用。代碼見： Paging.vue

也能夠直接在JSfiddle中查看實現

—————————————下面是以前的版本————————————

直接上代碼。只有一個小小的須要注意的點：vue1.x的v-for循環是從0開始，聽從了程序語言設計的一向的作法，而vue2.x是從1開始的，符合咱們日常的習慣。用下來仍是vue2.x的作法方便一些，不須要繞一會兒了。

你也能夠 直接在jsfiddle中查看 。

//html
<div id="paging">
<span v-on:click="switchPage(curPage - 1)">prev</span>
<span v-for="item in sum" v-bind:class="{'current-page': item == curPage}" v-text="item" v-on:click="switchPage(item)"></span>
<span v-on:click="switchPage(curPage + 1)">next</span>
</div>

//js
var paging = new Vue({
  el: '#paging',
  data: {
    sum: 4, //總頁數
    curPage: 1, //當前頁
  },
  methods: {
    getBooks: function(page){
      //頁面初始化函數
    },
    switchPage: function(page){
      var vm = this;
      if(page < 1) {
        page = 1;
      } else if(page > vm.sum) {
        page = vm.sum;
      }
      vm.getBooks(page);
      vm.curPage = page;
    },
  }
})

//css
span {
  display: inline-block;
  margin: 3px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: pink;
  background: #fff;
  border-radius: 5px;
}
span.current-page,
span:hover {
  color: #fff;
  background: pink;
}

參考文章：
https://segmentfault.com/a/11...