编程 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 相关文章推荐

ExtJS GTGrid 简单用户管理

Jul 01 Javascript

查询json的数据结构的8种方式简介

Mar 10 Javascript

js获取时间并实现字符串和时间戳之间的转换

Jan 05 Javascript

使用jquery操作session方法分享

Jan 22 Javascript

js去除浏览器默认底图的方法

Jun 08 Javascript

jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

Jul 27 Javascript

js实现当前输入框高亮显示的方法

Aug 19 Javascript

js实现select下拉框菜单

Dec 08 Javascript

JavaScript编程学习技巧汇总

Feb 21 Javascript

js实现开启密码大写提示

Dec 21 Javascript

jQuery实现图片滑动效果

Mar 08 Javascript

深入理解vue2.0路由如何配置问题

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

PHP中usort在值相同时改变原始位置问题的解决方法

2011/11/27 PHP

php实现在服务器端调整图片大小的方法

2015/06/16 PHP

php基于websocket搭建简易聊天室实践

2016/10/24 PHP

PHP登录（ajax提交数据和后台校验）实例分享

2016/12/29 PHP

php实现单笔转账到支付宝功能

2018/10/09 PHP

JavaScript 面向对象编程（1）基础

2010/05/18 Javascript

js中匿名函数的N种写法

2010/09/08 Javascript

jQuery Tab插件用于在Tab中显示iframe，附源码和详细说明

2011/06/27 Javascript

JavaScript中将一个值转换为字符串的方法分析[译]

2012/09/21 Javascript

验证码按回车不变解决方法

2013/03/29 Javascript

利用js制作html table分页示例(js实现分页)

2014/04/25 Javascript

JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

2014/09/13 Javascript

原生js实现日期联动

2015/01/12 Javascript

JavaScript电子时钟倒计时第二款

2016/01/10 Javascript

vuejs在解析时出现闪烁的原因及防止闪烁的方法

2016/09/19 Javascript

Javascript中字符串replace方法的第二个参数探究

2016/12/05 Javascript

Bootstrap table简单使用总结

2017/02/15 Javascript

深入理解vue路由的使用

2017/03/24 Javascript

微信小程序空白页重定向解决办法

2017/06/27 Javascript

react-native-video实现视频全屏播放的方法

2018/03/19 Javascript

一步一步的了解webpack4的splitChunk插件(小结)

2018/09/17 Javascript

详解vue-element Tree树形控件填坑路

2019/03/26 Javascript

Vue实现腾讯云点播视频上传功能的实现代码

2020/08/17 Javascript

详解vue中使用transition和animation的实例代码

2020/12/12 Vue.js

Python环境下搭建属于自己的pip源的教程

2016/05/05 Python

对python3中pathlib库的Path类的使用详解

2018/10/14 Python

Python 保持登录状态进行接口测试的方法示例

2019/08/06 Python

Django结合ajax进行页面实时更新的例子

2019/08/12 Python

文案策划求职信

2014/03/18 职场文书

开服装店计划书

2014/08/15 职场文书

不服从公司安排检讨书

2014/09/24 职场文书

任命通知范文

2015/04/21 职场文书

工作失职检讨书范文

2015/05/05 职场文书

2016七夕情人节广告语

2016/01/28 职场文书

vue使用v-model进行跨组件绑定的基本实现方法

2021/04/28 Vue.js

Android 中的类文件和类加载器详情

2022/06/05 Java/Android