vue实现容易的分页组件
在日常的工作中，总会遇到分页的使用，这次开始学习vue，就自己动手写一个简单的分页组件。
组件的样式采用的是 bootstrap 的分页，在此基础上添加分页的部分代码。
直接上代码，仅供参考：
1) template模板部分：
<script type="text/x-template" id="page">
<!--pagination-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li :class="{'disabled':current == 1}" @click="current!=1 &¤t-- && goto(current--)">
<a href="#" aria-label="Previous" :disabled="current==1">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="index in pages.totalPage" @click="goto(index)" :class="{'active':current == index}" :key="index" >
<a href="#">{{index}}</a>
</li>
<li :class="{'disabled':pages.totalPage == current}" @click="current!=pages.totalPage &¤t++ && goto(current++)">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</script>
2) 组件的定义：
Vue.component("paginator",{
template:'#page',
props: ['pages'],
data:function(){
return{
current:1,
limit:10
}
},
methods:{
goto:function(index){
if(index == this.current) return;
this.current = index;
//处理后续的请求
}
}
});
3) 组件的使用
<!--use myPaginator component-->
<div id="app"><paginator v-bind:pages="page"></paginator></div>
var vm = new Vue({
el:'#app',
data:{
page:{
totalPage:7
}
}
})；
简单的分页组件实现完毕。
页面展示效果如下：
附件自己的测试文件。