In daily work, you will always encounter the use of paging. This time, I started to learn vue and wrote a simple paging component by myself.
The style of the component adopts the pagination of bootstrap , and on this basis, some code of the pagination is added.
Directly on the code, for reference only:
1) template template part:
<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) Definition of components:
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;
// handle subsequent requests
}
}
});
3) Use of components
<!--use myPaginator component-->
<div id="app"><paginator v-bind:pages="page"></paginator></div>
var vm = new Vue({
el: '# app',
data:{
page:{
totalPage: 7
}
}
})；
A simple paging component is implemented.
The page display effect is as follows:
Attach your own test files.