vue实现前端分页完整代码


Posted in Javascript onJune 17, 2020

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

首先,做出来的效果如图所示,具体的Ajax请求数据可以写在点击函数中
分页效果算是比较费脑子的,里面计算有些麻烦,本文上完整代码,一起学习进步

vue实现前端分页完整代码

  • “上一页”写两个li元素,如果已经是第一页,那么就禁止鼠标点击,如果不是就curr减减,并且可以点击
  • 同理“下一页”也一样
  • 中间部分是通过indexs循环,indexs通过computed计算得出
<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+'页');
    }
  },
  computed: {
    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+'页');
    }
  },
  computed: {
    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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
Mac下安装vue
Apr 11 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 #Javascript
详解JS预解析原理
Jun 16 #Javascript
You might like
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
python创建线程示例
2014/05/06 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python探索之创建二叉树
2017/10/25 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
python3.4中清屏的处理方法
2020/07/06 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
软件测试面试题
2014/01/05 面试题
关于打架的检讨书
2014/01/17 职场文书
审计专业自荐信范文
2014/04/21 职场文书
2014年除四害工作总结
2014/12/06 职场文书
商标侵权律师函
2015/05/27 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
redis实现共同好友的思路详解
2021/05/26 Redis
Spring整合Mybatis的全过程
2021/06/28 Java/Android
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL