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刷新框架子页面的七种方法代码
Nov 20 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
JavaScript实现多个物体同时运动
Mar 12 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
学python爬虫能做什么
2020/07/29 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python Zmail模块简介与使用示例
2020/12/19 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
数据库基础的一些面试题
2012/02/25 面试题
九年级科学教学反思
2014/01/29 职场文书
安全教育实施方案
2014/03/02 职场文书
美术教师岗位职责
2014/03/18 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
土地租赁协议书
2015/01/29 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python