Vue实用分页paging实例代码

直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。

创新互联公司主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务汉阴,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

//html

prev

next

//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;
}

效果如下：

Vue 实用分页paging实例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

网页名称：Vue实用分页paging实例代码
地址分享：http://dzwzjz.com/article/gsssjj.html

大橙子网站建设，新征程启航

Vue实用分页paging实例代码

其他资讯