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

js不是基础的基础

Dec 24 Javascript

js获取div高度的代码

Aug 09 Javascript

javascript 操作文件实现方法小结

Jul 02 Javascript

javascript 传统事件模型构造的事件监听器实现代码

May 31 Javascript

JavaScript高级程序设计阅读笔记（二十） js错误处理

Aug 14 Javascript

js实现瀑布流的三种方式比较

Jun 28 Javascript

深入探秘jquery瀑布流的实现

Jan 30 Javascript

深入理解逻辑表达式的用法与或非的用法

Jun 06 Javascript

BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

Aug 17 Javascript

js 将canvas生成图片保存,或直接保存一张图片的实现方法

Jan 02 Javascript

vue登录注册实例详解

Sep 14 Javascript

解决Vue动态加载本地图片问题

Oct 09 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自定义分页类完整实例

2015/12/25 PHP

ThinkPHP中session函数详解

2016/09/14 PHP

PHP基于Closure类创建匿名函数的方法详解

2017/08/17 PHP

Codeigniter里的无刷新上传的实现代码

2019/04/14 PHP

js对象的比较

2011/02/26 Javascript

jquery实现滑动图片自己测试的例子

2013/11/05 Javascript

sogou地图API用法实例教程

2014/09/11 Javascript

js实现iframe跨页面调用函数的方法

2014/12/13 Javascript

angularJS 入门基础

2015/02/09 Javascript

学习JavaScript设计模式之责任链模式

2016/01/18 Javascript

谈谈PHP中相对路径的问题与绝对路径的使用

2016/08/16 Javascript

微信小程序 picker-view 组件详解及简单实例

2017/01/10 Javascript

javascript容错处理代码(屏蔽js错误)

2017/01/20 Javascript

微信小程序实现瀑布流布局与无限加载的方法详解

2017/05/12 Javascript

详解bootstrap导航栏.nav与.navbar区别

2017/11/23 Javascript

Vue中的异步组件函数实现代码

2018/07/20 Javascript

vue中rem的配置的方法示例

2018/08/30 Javascript

利用jqgrid实现上移下移单元格功能

2018/11/07 Javascript

微信小程序开发实现的IP地址查询功能示例

2019/03/28 Javascript

react 移动端实现列表左滑删除的示例代码

2019/07/04 Javascript

微信小程序实现收货地址左滑删除

2020/11/18 Javascript

layui关闭弹窗后刷新主页面和当前更改项的例子

2019/09/06 Javascript

基于纯JS实现多张图片的懒加载Lazy过程解析

2019/10/14 Javascript

web.py在模板中输出美元符号的方法

2014/08/26 Python

Python使用scrapy采集数据时为每个请求随机分配user-agent的方法

2015/04/08 Python

可能是最全面的 Python 字符串拼接总结【收藏】

2018/07/09 Python

Python实现时间序列可视化的方法

2019/08/06 Python

Python之——生成动态路由轨迹图的实例

2019/11/22 Python

python数据分析:关键字提取方式

2020/02/24 Python

工程专业毕业生自荐信范文

2013/12/25 职场文书

银行办公室岗位职责

2014/03/10 职场文书

学校中秋节活动总结

2015/03/23 职场文书

外科护士长工作总结

2015/08/12 职场文书

告诉你创业计划书的8个实用技巧

2019/07/12 职场文书

Win11安全功能升级：内置防网络钓鱼功能

2022/04/08 数码科技

php解析非标准json、非规范json的方式实例

2022/05/10 PHP