核心产品
帮助中心
时间：2021-05-26
本文实例为大家分享了vue实现分页效果的具体代码，供大家参考，具体内容如下
第一种效果：数据量不大时可采用
<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="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:27px;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;border-radius: 3px;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 22px;}ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li:hover a{color:#fff;}.num_total{float:right;height:100%;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 class="firstPage" @click=" page.currentpage = 0 "><a href="javascript:;" >首页</a></li><li class="prev" v-show=" page.currentpage > 0 " @click=" page.currentpage-- "><a href="javascript:;" ><</a></li><li v-for="d in page.totalpage" @click=" page.currentpage = $index " :class=" page.currentpage == $index ? 'active' : '' "><a href="javascript:;" >{{$index + 1}}</a></li><li class="next" v-show=" page.currentpage < page.totalpage - 1 " @click=" page.currentpage++ "><a href="javascript:;" >></a></li><li class="lastPage" @click=" page.currentpage = page.totalpage - 1 "><a href="javascript:;" >尾页</a></li></ul><div class="num_total">共 <span>{{page.totalrecord}}</span> 条信息，共 <span>{{page.totalpage}}</span> 页</div></div><script>new Vue({el: "#app-body",data : {"page" : {"totalrecord" : 100,"currentpage" : 0,"pagesize" : 20,"totalpage" : 5,},},watch : {"page.currentpage" : function(val){var _this=this;_this._getList();},},methods : {_getList:function(){}},ready : function(){var _this = this;}});</script></body></html>第二种效果：当数据量较大时使用
<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="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:24px;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: 22px;}ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li.active a{color:#fff;}ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}ul.pagetation_box li:hover a{color:#fff;}ul.pagetation_box li.more{width:24px;padding:0;background: url(../img/public/page_more.png) no-repeat center center;border:none;}.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 class="firstPage" @click="page.currentPage=1"><a href="javascript:;" >首页</a></li><li class="prev" v-show="page.currentPage != 1" @click="page.currentPage-- && _gotoPage(page.currentPage)"><a href="javascript:;" ><</a></li><li v-for="index in pages" @click="_gotoPage(index)" :class="{'active':page.currentPage == index}"><a href="javascript:;" >{{index}}</a></li><li class="next" v-show="page.allPages != page.currentPage && page.allPages != 0 " @click="page.currentPage++ && _gotoPage(page.currentPage)"><a href="javascript:;" >></a></li><li class="lastPage" @click="page.currentPage=page.allPages"><a href="javascript:;" >尾页</a></li></ul><div class="num_total">共 <span>{{page.allRecords}}</span> 条信息，共 <span>{{page.allPages}}</span> 页</div></div><script>new Vue({el : "#app-body",data : {"page":{"currentPage":1,"pagesize":10,"allRecords":100,"allPages":10,"showItem":4,}},watch : {"page.currentpage" : function(val){var _this=this;_this._getList();},},computed:{pages:function(){var _this=this;var p=[];if( _this.page.currentPage < _this.page.showItem ){var i = Math.min(_this.page.showItem,_this.page.allPages);while(i){p.unshift(i--);}}else{var middle = _this.page.currentPage - Math.floor(_this.page.showItem / 2 ),i = _this.page.showItem;console.log(middle,i);if( middle > (_this.page.allPages - _this.page.showItem) ){middle = (_this.page.allPages - _this.page.showItem) + 1}while(i--){p.push( middle++ );}}return p;},},methods : {_gotoPage:function(i){var _this=this;if(i == _this.page.currentPage) return;_this.page.currentPage = i;},},ready : function(){var _this = this;_this.pages;}});</script></body></html>第三种效果：当数据量很大时使用
<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"><script src="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 class="prev" v-if="page.prevBtn==true" @click="_gotoPage('prev')"><a href="javascript:;" ><</a></li><li class="prevDisabled" v-if="page.prevBtn==false"><a href="javascript:;" ><</a></li><li :class="{active:page.currentPage==index}" v-for="index in page.p1" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li><li class="more" v-if="page.isShowMore1">...</li><li :class="{active:page.currentPage==index}" v-for="index in page.p2" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li><li class="more" v-if="page.isShowMore2">...</li><li :class="{active:page.currentPage==index}" v-for="index in page.p3" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li><li class="next" v-if="page.nextBtn==true" @click="_gotoPage('next')"><a href="javascript:;" >></a></li><li class="nextDisabled" 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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
织梦dedecsm模板中首页如何实现分页的三种方法有时在做织梦模板的时候需要实现首页分页效果，但是织梦本身首页是不带分页功能的，那如何实现织梦首页分页呢？有3种
本文实例为大家分享了Vue动态实现评分效果的具体代码，供大家参考，具体内容如下1.图片分为三种on:half:off.star{font-size:0;}.st
本文实例为大家分享了vue.js2.0实现分页效果的具体代码，供大家参考，具体内容如下vue.js2.0实现的简单分页*{margin:0;padding:0;
本文实例为大家分享了Vue实现web分页组件的具体代码，供大家参考，具体内容如下效果演示源代码测试分页-/vue/dist/vue.js">varapp=new
在vue中，实现Tab切换主要有三种方式：使用动态组件，使用vue-router路由，使用第三方插件。因为这次完成的功能只是简单切换组件，再则觉得使用路由切换需
