当前位置:首页 > 移动开发 > 移动开发

vue实现容易的分页组件

优良自学吧提供vue实现容易的分页组件,vue实现简单的分页组件        在日常的工作中,总会遇到分页的使用,这次开始学习vue,就自己动手写一个简单的分页组件。  

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}" [email protected]="current!=1 &&current-- && goto(current--)">

<a href="#" aria-label="Previous" :disabled="current==1">

<span aria-hidden="true">&laquo;</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}" [email protected]="current!=pages.totalPage &&current++ && goto(current++)">

<a href="#" aria-label="Next">

<span aria-hidden="true">&raquo;</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

}

}

});

简单的分页组件实现完毕。

页面展示效果如下:


vue实现容易的分页组件
附件自己的测试文件。


(本文来自互联网,不代表搜站(http://www.ylzx8.cn/)的观点和立场)
本站所有内容来自互联网,若本站收录的信息无意侵犯了贵司版权,请给我们来信(ylzx8cn@163.com),我们会及时处理和回复,谢谢