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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
javascript事件模型代码
Jul 01 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
javascript实现计算器功能
Mar 30 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php adodb分页实现代码
2009/03/19 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
促销活动总结模板
2014/07/01 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
二手车转让协议书
2015/01/29 职场文书
小学生手册家长意见
2015/06/03 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Python+Appium自动化测试的实战
2021/06/30 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android