Vue实用分页paging实例代码
直接上代码。只有一个小小的需要注意的点:vue1.x的v-for循环是从0开始,遵从了程序语言设计的一贯的做法,而vue2.x是从1开始的,符合我们平常的习惯。用下来还是vue2.x的做法方便一些,不需要绕一下子了。
创新互联公司主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务汉阴,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
//htmlprev 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实例代码
网址分享:http://myzitong.com/article/gsssjj.html