在树林里，许多的小鸟在自由自在欢乐地飞翔着，高兴起来，便唱出清脆悦耳的曲子，和煦的春风吹拂着小河，河面上波光粼粼。我忽然被一阵悦耳、动听的笛声所牵动，放眼望去，一群顽皮的小孩子正用垂柳的茎做柳笛呢！他们吹出了心里的幸福和快乐。
直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。
//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;
}
效果如下：
到此这篇关于Vue 实用分页paging实例代码就介绍到这了。遇见你是命运的安排，成为了朋友是我的选择，爱上你是个意外。更多相关Vue 实用分页paging实例代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
