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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
AngularJS中的模块详解
Jan 29 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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变量作用域以及地址引用问题
2013/12/27 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
div层的移动及性能优化
2010/11/16 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python转换摩斯密码示例
2014/02/16 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
python编程的核心知识点总结
2021/02/08 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
家长对孩子评语
2014/01/30 职场文书
股权转让协议书
2014/04/12 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书