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