vue实现前端分页完整代码
网络编程 2021-07-04 15:03www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue实现前端分页完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现前端分页的具体代码,供大家参考,具体内容如下
首先,做出来的效果如图所示,具体的Ajax请求数据可以写在点击函数中
分页效果算是比较费脑子的,里面计算有些麻烦,本文上完整代码,一起学习进步
- “上一页”写两个li元素,如果已经是第一页,那么就禁止鼠标点击,如果不是就curr减减,并且可以点击
- 同理“下一页”也一样
- 中间部分是通过indexs循环,indexs通过puted计算得出
<div class="page-bar"> <ul> <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li> <li v-if="cur==1"><a class="banclick">上一页</a></li> <!--当前页背景色为蓝色--> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{ index }}</a> </li> <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一页</a></li> <li v-if="cur == all"><a class="banclick">下一页</a></li> <li><a>共<i>{{all}}</i>页</a></li> </ul> </div>
难点就是IF嵌套语句
1、每次显示5个数据,如果大于3,范围从3到6,如果到达7,那么下边加2变成9,已经超过最大的范围值,所以最大范围到6
2、如果是大于6,那么最大值就是最大值,最小变成all-4
3、如果3以内,默认不跳动
var pageBar = new Vue({ el: '.page-bar', data: { all: 8, //总页数 cur: 1//当前页码 }, watch: { cur: function(oldValue , newValue){ console.log(arguments); } }, methods: { btnClick: function(data){ if(data != this.cur){ this.cur = data; } }, pageClick: function(){ console.log('现在在'+this.cur+'页'); } }, puted: { indexs: function(){ var left = 1; var right = this.all; var ar = []; if(this.all>= 5){ //这里最大范围从3到6,如果到达7,那么下边加2变成9,已经超过最大的范围值 if(this.cur > 3 && this.cur < this.all-1){ //以4为参考基准,左面加2右边加2 left = this.cur - 2 right = this.cur + 2 }else{ if(this.cur<=3){ left = 1 right = 5 }else{ right = this.all left = this.all -4 } } } while (left <= right){ ar.push(left) left ++ } console.log(ar); return ar } } })
全部代码:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="js/vue.min.js"></script> <style> .page-bar{ margin:40px; } ul,li{ margin: 0px; padding: 0px; } li{ list-style: none } .page-bar li:first-child>a { margin-left: 0px } .page-bar a{ border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer } .page-bar a:hover{ background-color: #eee; } .page-bar a.banclick{ cursor:not-allowed; } .page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px; } </style> </head> <body> <div class="page-bar"> <ul> <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li> <li v-if="cur==1"><a class="banclick">上一页</a></li> <!--当前页背景色为蓝色--> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{ index }}</a> </li> <li v-if="cur<all"><a v-on:click="cur++,pageClick()">下一页</a></li> <li v-if="cur == all"><a class="banclick">下一页</a></li> <li><a>共<i>{{all}}</i>页</a></li> </ul> </div> <script type="text/javascript"> var pageBar = new Vue({ el: '.page-bar', data: { all: 8, //总页数 cur: 1//当前页码 }, watch: { cur: function(oldValue , newValue){ console.log(arguments); } }, methods: { btnClick: function(data){ if(data != this.cur){ this.cur = data; } }, pageClick: function(){ console.log('现在在'+this.cur+'页'); } }, puted: { indexs: function(){ var left = 1; var right = this.all; var ar = []; if(this.all>= 5){ //这里最大范围从3到6,如果到达7,那么下边加2变成9,已经超过最大的范围值 if(this.cur > 3 && this.cur < this.all-1){ //以4为参考基准,左面加2右边加2 left = this.cur - 2 right = this.cur + 2 }else{ if(this.cur<=3){ left = 1 right = 5 }else{ right = this.all left = this.all -4 } } } while (left <= right){ ar.push(left) left ++ } console.log(ar); return ar } } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:使用next.js开发网址缩短服务的方法
下一篇:JS实现网站楼层导航效果代码实例
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程