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>

js

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>

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

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
Javascript中的delete介绍
Sep 02 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
Vue异步组件使用详解
Apr 08 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
vue插槽slot的理解和使用方法
Apr 03 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
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
原生JS实现天气预报
2020/06/16 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
小程序实现tab标签页
2020/11/16 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python实现二叉树的遍历
2017/12/11 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
基于Python解密仿射密码
2019/10/21 Python
药剂专业学生求职信范文
2013/12/28 职场文书
运动会广播稿60字
2014/01/15 职场文书
教师党员一句话承诺
2014/03/28 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
规范化管理年活动总结
2014/08/29 职场文书