编程 Javascript

vuejs2.0实现一个简单的分页示例

Posted in Javascript onFebruary 22, 2017

最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂，没耐心看自己动手写了一个。

用js实现的分页结果如图所示：

vuejs2.0实现一个简单的分页示例

css

.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;
}

模版

<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>

var pageBar = new Vue({
  el: '.page-bar',
  data: {
    all: 20, //总页数
    cur: 1,//当前页码
});

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.

el就是element的缩写,定位模版的位置.data就是数据了.

知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.

所以我们要用computed

computed: {
    indexs: function(){
     var left = 1;
     var right = this.all;
     var ar = [];
     if(this.all>= 5){
      if(this.cur > 3 && this.cur < this.all-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 ++
    }
    return ar
    }
     
  }

看一下页面显示出来的循环：

<li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
    <a v-on:click="btnClick(index)">{{ index }}</a>
  </li>

v-for是循环渲染输出计算属性indexs.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件，我把index当参数传进入了,后面做判断，默认传event事件.
然后我们给Vue的选项里面再增加methods字段

methods: {
    btnClick: function(data){//页码点击事件
      if(data != this.cur){
        this.cur = data 
      }
    },
    pageClick: function(){
      console.log('现在在'+this.cur+'页');
    }
  },

组件交互

组件写完了，问题来了，用户点击发生页面改变，你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下，插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

watch: {
    cur: function(oldValue , newValue){
      console.log(arguments);
    }
  }

观察了cur数据当它改变的时候，可以获取前后值。然后通知其他组件。

完整的代码：

<!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){
      if(this.cur > 3 && this.cur < this.all-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 ++
    }
    return ar
    }
     
  }
})
</script>
</body>
</html>

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

vuejs2.0实现一个简单的分页示例

- Author -

JS_life

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery动态创建DOM、表单元素的实现代码

Aug 09 Javascript

window.open以post方式将内容提交到新窗口

Dec 26 Javascript

jQuery实现的图片分组切换焦点图插件

Jan 06 Javascript

javascript实时获取鼠标坐标值并显示的方法

Apr 30 Javascript

基于JavaScript制作霓虹灯文字代码特效

Sep 01 Javascript

使用javascript插入样式

Mar 14 Javascript

jQuery表格插件datatables用法汇总

Mar 29 Javascript

详解jQuery选择器

Dec 21 Javascript

JavaScript异步加载问题总结

Feb 17 Javascript

在vue项目中引入高德地图及其UI组件的方法

Sep 04 Javascript

vue2.0+SVG实现音乐播放圆形进度条组件

Sep 21 Javascript

OpenLayers3实现鼠标移动显示坐标

Sep 25 Javascript

Angular.js与node.js项目里用cookie校验账户登录详解

Feb 22 #Javascript

js实现无缝滚动图

Feb 22 #Javascript

JavaScript实现二分查找实例代码

Feb 22 #Javascript

浅谈jquery拼接字符串效率比较高的方法

Feb 22 #Javascript

微信小程序 TLS 版本必须大于等于1.2问题解决

Feb 22 #Javascript

原生JS实现幻灯片

Feb 22 #Javascript

微信小程序解析网页内容详解及实例

Feb 22 #Javascript

You might like

关于Intype一些小问题的解决办法

2008/03/28 PHP

PHP strtotime函数用法、实现原理和源码分析

2015/02/04 PHP

百度地图经纬度转换到腾讯地图/Google 对应的经纬度

2015/08/28 PHP

WordPres对前端页面调试时的两个PHP函数使用小技巧

2015/12/22 PHP

Zend Framework教程之Application用法实例详解

2016/03/14 PHP

php HTML无刷新提交表单

2016/04/05 PHP

CI框架(CodeIgniter)实现的数据库增删改查操作总结

2018/05/23 PHP

JavaScript多线程的实现方法

2007/05/08 Javascript

Javascript继承(上)——对象构建介绍

2012/11/08 Javascript

js数组转json并在后台对其解析具体实现

2013/11/20 Javascript

js判断undefined类型,undefined,null, 的区别详细解析

2013/12/16 Javascript

原生js实现淘宝首页点击按钮缓慢回到顶部效果

2014/04/06 Javascript

浅析在javascript中创建对象的各种模式

2016/05/06 Javascript

jquery 遍历数组 each 方法详解

2016/05/25 Javascript

JavaScript数值千分位格式化的两种简单实现方法

2016/08/01 Javascript

ES6新特性之函数的扩展实例详解

2017/04/01 Javascript

浅谈react.js 之批量添加与删除功能

2017/04/17 Javascript

js获取一组日期中最近连续的天数

2017/05/25 Javascript

Vue的H5页面唤起支付宝支付功能

2019/04/18 Javascript

JS实现炫酷轮播图

2020/11/15 Javascript

Python实现读取并保存文件的类

2017/05/11 Python

python爬取微信公众号文章

2018/08/31 Python

Python3实现的简单三级菜单功能示例

2019/03/12 Python

python求绝对值的三种方法小结

2019/12/04 Python

使用pytorch实现可视化中间层的结果

2019/12/30 Python

Python 串口通信的实现

2020/09/29 Python

Pycharm添加虚拟解释器报错问题解决方案

2020/10/13 Python

Python实现给PDF添加水印的方法

2021/01/25 Python

英国领先的豪华时尚家居网上商店：Amara

2019/08/12 全球购物

副总经理工作职责

2013/11/28 职场文书

小班开学寄语

2014/04/04 职场文书

2014年计划生育协会工作总结

2014/11/14 职场文书

2014年家长学校工作总结

2014/11/20 职场文书

应聘教师求职信范文

2015/03/20 职场文书

《世界多美呀》教学反思

2016/02/22 职场文书

Grafana可视化监控系统结合SpringBoot使用

2022/04/19 Redis