Vue 实用分页paging实例代码

Vue 实用分页paging实例代码

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

//html

prev

&XbVoAGHExelt;/span>

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) {

http://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;

}

效果如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。