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