欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

vue实现分页的三种效果

时间:2020-06-23|栏目:JavaScript|点击:

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

<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"> <script src="http://www.zhano.cn/webFront/JavaScript/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> <div> <ul> <li @click=" page.currentpage = 0 "><a href="javascript:;" >首页</a></li> <li v-show=" page.currentpage > 0 " @click=" page.currentpage-- "><a href="javascript:;" >&lt;</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 v-show=" page.currentpage < page.totalpage - 1 " @click=" page.currentpage++ "><a href="javascript:;" >&gt;</a></li> <li @click=" page.currentpage = page.totalpage - 1 "><a href="javascript:;" >尾页</a></li> </ul> <div> 共 <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="http://www.zhano.cn/webFront/JavaScript/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> <div> <ul> <li @click="page.currentPage=1"><a href="javascript:;" >首页</a></li> <li v-show="page.currentPage != 1" @click="page.currentPage-- && _gotoPage(page.currentPage)"><a href="javascript:;" >&lt;</a></li> <li v-for="index in pages" @click="_gotoPage(index)" :class="{'active':page.currentPage == index}"><a href="javascript:;" >{{index}}</a></li> <li v-show="page.allPages != page.currentPage && page.allPages != 0 " @click="page.currentPage++ && _gotoPage(page.currentPage)"><a href="javascript:;" >&gt;</a></li> <li @click="page.currentPage=page.allPages"><a href="javascript:;" >尾页</a></li> </ul> <div> 共 <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>

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

上一篇:vue实现点击按钮切换背景颜色的示例代码

栏    目:JavaScript

下一篇:三分钟了解Vue框架

本文标题:vue实现分页的三种效果

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/2071.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7