脚本宝典收集整理的这篇文章主要介绍了

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...

总结

以上是脚本宝典为你收集整理的

Vue 实用分页组件paging(页数太多时显示省略号)

全部内容,希望文章能够帮你解决

Vue 实用分页组件paging(页数太多时显示省略号)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过