微客导航 » 文章资讯 » vue分页插件的使用方法

vue分页插件的使用方法

2023-08-04 00:56:04 142

本文实例为大家分享了vue分页插件的具体代码，供大家参考，具体内容如下

分页插件代码：




上一页
5"class="jump"@click="jumpPage(1)">1
...
{{num}}
...

下一页
{{pages}}

<#--跳转到：-->
<#---->
<#--GO-->

vue代码

data:{
current_page:result.resultObj.number+1,//当前页
pages:result.resultObj.totalPages,//总页数
changePage:'',//跳转页
nowIndex:0
},
computed:{
show:function(){
returnthis.pages&&this.pages!=1
},
pstart:function(){
returnthis.current_page==1;
},
pend:function(){
returnthis.current_page==this.pages;
},
efont:function(){
if(this.pages<=7)returnfalse;
returnthis.current_page>5
},
ebehind:function(){
if(this.pages<=7)returnfalse;
varnowAy=this.indexs;
returnnowAy[nowAy.length-1]!=this.pages;
},
indexs:function(){

varleft=1,
right=this.pages,
ar=[];
if(this.pages>=7){
if(this.current_page>5&&this.current_page=1){
this.current_page=id;
loadData(this.current_page-1,size);
}
},
lessPage:function(){
this.current_page--;
loadData(this.current_page-1,size);
},
addPage:function(){
this.current_page++;
loadData(this.current_page-1,size);
}
}

使用说明：

直接拷贝即可使用，只需要修改总页数、当前页。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue分页插件的使用方法

热门推荐

随机推荐