文章详情页

vue实现分页的三种效果

更多 QQ空间微信 QQ好友腾讯朋友复制链接

【字号：大中小】日期：2023-01-11 15:14:53浏览：6作者：猪猪

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

第一种效果：数据量不大时可采用

vue实现分页的三种效果

第二种效果：当数据量较大时使用

vue实现分页的三种效果

第三种效果：当数据量很大时使用

vue实现分页的三种效果

<!doctype html><html lang='en'><head><meta http-equiv='Content-Type' content='application/xhtml+xml; charset=UTF-8'><script src='https://www.haobala.com/bcjs/vue.min.js' type='text/javascript'></script><title>vue分页</title><style type='text/css'>ul{list-style:none;margin:0;}.pagetation_info{width:100%;height:30px;padding:20px 0;}ul.pagetation_box{float:right;height:100%;padding:0 60px;}ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 27px;}ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #03a9f4;border-color:#03a9f4;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.more{background-color: #fff}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li.prevDisabled,ul.pagetation_box li.nextDisabled{width:7px;}ul.pagetation_box li.prevDisabled a,ul.pagetation_box li.nextDisabled a{color:#ccc;}ul.pagetation_box li.prevDisabled:hover, ul.pagetation_box, li.nextDisabled:hover{background-color: #f8f8f8;border-color:#e6ecef;}ul.pagetation_box li.prevDisabled:hover a,ul.pagetation_box li.nextDisabled:hover a{color:#ccc;}ul.pagetation_box li:hover{background-color: #03a9f4;border-color:#03a9f4;}ul.pagetation_box li.more:hover{background-color: #fff;border:none;}ul.pagetation_box li:hover a{color:#fff;}ul.pagetation_box li.more{padding:0;border:none;line-height:22px;}.num_total{float:right;height:100%;line-height:22px;padding-top:3px;padding-bottom:3px;}.num_total>span{color:#FC5B27;}</style></head><body id='app-body'><div class='pagetation_info clearfix'><ul class='pagetation_box'><li v-if='page.prevBtn==true' @click='_gotoPage(’prev’)'><a href='javascript:;' ><</a></li><li v-if='page.prevBtn==false'><a href='javascript:;' ><</a></li><li : v-for='index in page.p1' @click='_gotoPage(index)'><a href='javascript:;' >{{index}}</a></li><li v-if='page.isShowMore1'>...</li><li : v-for='index in page.p2' @click='_gotoPage(index)'><a href='javascript:;' >{{index}}</a></li><li v-if='page.isShowMore2'>...</li><li : v-for='index in page.p3' @click='_gotoPage(index)'><a href='javascript:;' >{{index}}</a></li><li v-if='page.nextBtn==true' @click='_gotoPage(’next’)'><a href='javascript:;' >></a></li><li v-if='page.nextBtn==false'><a href='javascript:;' >></a></li></ul><div class='num_total'>共 <span>{{page.allItems}}</span> 条信息，共 <span>{{page.allPages}}</span> 页</div></div><script>var App=new Vue({el : '#app-body',data : {'page' : {'currentPage':1,'allPages':10,'allItems':100,'pagesize':10,'showBtn':5,'nextBtn':true,'prevBtn':false,'isShowMore1':false,'isShowMore2':false,'p1':[],'p2':[],'p3':[],},},watch : {'page.currentpage' : function(val){var _this=this;_this._getList();},},computed:{pagination:function(){var _this=this;var i = _this.page.showBtn-2;if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}var p1=[],p2=[],p3=[];if( _this.page.allPages < _this.page.showBtn ){_this.page.isShowMore1=false;_this.page.isShowMore2=false;i = _this.page.allPages;while(i){p1.unshift(i--);}}else if(_this.page.allPages > _this.page.showBtn && _this.page.allPages < _this.page.showBtn+1){_this.page.isShowMore1=false;_this.page.isShowMore2=true;if(_this.page.currentPage<3){p1=[1,2,3];p3.push(_this.page.allPages);}else{p1=[1];i=_this.page.showBtn-2;while(i--){p3.unshift( _this.page.allPages-- );}}}else{if(_this.page.currentPage<3){p1=[1,2,3];p3.push(_this.page.allPages);_this.page.isShowMore1=false;_this.page.isShowMore2=true;}else if(_this.page.currentPage>_this.page.allPages-2){_this.page.isShowMore1=true;_this.page.isShowMore2=false;p1=[1];i=3;var allPages = _this.page.allPages;while(i--){p3.unshift( allPages-- );}}else{_this.page.isShowMore1=true;_this.page.isShowMore2=true;if(_this.page.currentPage==3){_this.page.isShowMore1=false;}else if(_this.page.currentPage==_this.page.allPages-1){_this.page.isShowMore2=false;}p1=[1];p3.push(_this.page.allPages);var middle=parseInt((_this.page.showBtn-2)/2);var start=_this.page.currentPage-middle;i = _this.page.showBtn-2;while(i--){p2.push(start++);}}}_this.page.p1=p1;_this.page.p2=p2;_this.page.p3=p3;}},methods : {_gotoPage:function(n){var _this=this;if(n==_this.page.currentPage){return;}if(n==1){_this.page.prevBtn=false;}else{_this.page.prevBtn=true;}if(n==_this.page.allPages){_this.page.nextBtn=false;}else{_this.page.nextBtn=true;}if(typeof n==’number’){_this.page.currentPage=n;}else if(n==’next’){_this.page.currentPage++;}else if(n==’prev’){_this.page.currentPage--;}if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}_this.pagination;},},ready : function(){var _this = this;_this.pagination;}});</script></body></html>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

Vue

上一条：vue实现点击按钮切换背景颜色的示例代码下一条：详细分析vue响应式原理

相关文章：

1. 匹配模式 - XSL教程 - 42. XML入门精解之结构与语法3. ASP替换、保存远程图片实现代码4. HTML <!DOCTYPE> 标签5. ASP脚本组件实现服务器重启6. 低版本IE正常运行HTML5+CSS3网站的3种解决方案7. asp画中画广告插入在每篇文章中的实现方法8. xpath简介_动力节点Java学院整理9. PHP字符串前后字符或空格删除方法介绍10. CSS可以做的几个令你叹为观止的实例分享

排行榜

					
					将properties文件的配置设置为整个Web应用的全局变量实现方法
PHP的FTP学习（一）
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
VMware中如何安装Ubuntu
PHP技术发展迅猛 Zend完成D轮2000万融资
idea打开多个窗口的操作方法
PHP字符串前后字符或空格删除方法介绍
XML入门精解之结构与语法
xpath简介_动力节点Java学院整理
ASP.NET MVC使用异步Action的方法
ASP替换、保存远程图片实现代码
				

热门标签