编程 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源码]超长文章自动分页（客户端版）

Jan 09 Javascript

原生js实现shift/ctrl/alt按键的获取

Apr 08 Javascript

jQuery异步加载数据并添加事件示例

Aug 24 Javascript

javascript中的this详解

Dec 08 Javascript

JavaScript常用脚本汇总（二）

Mar 04 Javascript

jQuery实现Div拖动+键盘控制综合效果的方法

Mar 10 Javascript

jquery的幻灯片图片切换效果代码分享

Sep 07 Javascript

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

Sep 24 Javascript

jquery zTree异步加载、模糊搜索简单实例分享

Mar 24 Javascript

基于jquery实现多选下拉列表

Aug 02 jQuery

如何在Vue中抽离接口配置文件

Oct 31 Javascript

NUXT SSR初级入门笔记(小结)

Dec 16 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中比较时间大小实例

2014/08/21 PHP

PHP实现时间日期友好显示实现代码

2019/09/08 PHP

js使用数组判断提交数据是否存在相同数据

2013/11/27 Javascript

动态创建script标签实现跨域资源访问的方法介绍

2014/02/28 Javascript

javascript事件委托的方式绑定详解

2015/06/10 Javascript

jQuery实现tab选项卡效果的方法

2015/07/08 Javascript

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

2015/09/24 Javascript

Jquery中使用show()与hide()方法动画显示和隐藏图片

2015/10/08 Javascript

jquery+html仿翻页相册功能

2016/12/20 Javascript

详解使用vue脚手架工具搭建vue-webpack项目

2017/05/10 Javascript

微信小程序学习之数据处理详解

2017/07/05 Javascript

详解jquery选择器的原理

2017/08/01 jQuery

JS使用new操作符创建对象的方法分析

2019/05/30 Javascript

js实现打字小游戏

2019/12/17 Javascript

跟老齐学Python之再深点，更懂list

2014/09/20 Python

python实现根据用户输入从电影网站获取影片信息的方法

2015/04/07 Python

python+selenium开发环境搭建图文教程

2017/08/11 Python

Python解决八皇后问题示例

2018/04/22 Python

Django 数据库同步操作技巧详解

2019/07/19 Python

Django REST framework内置路由用法

2019/07/26 Python

python用线性回归预测股票价格的实现代码

2019/09/04 Python

python实现视频读取和转化图片

2019/12/10 Python

HTML5利用约束验证API来检查表单的输入数据的代码实例

2016/12/20 HTML / CSS

捷克电器和DJ设备网上商店：Electronic-star

2017/07/18 全球购物

成人大专自我鉴定范文

2013/10/19 职场文书

机关干部四风问题自我剖析及整改措施

2014/10/26 职场文书

中班下学期个人工作总结

2015/02/12 职场文书

奖学金个人总结

2015/03/04 职场文书

工作推荐信模板

2015/03/25 职场文书

2015年幼儿园中班工作总结

2015/04/25 职场文书

工作态度恶劣检讨书

2015/05/06 职场文书

小学2016年第十八届推普周活动总结

2016/04/05 职场文书

又涨知识了，自律到底多重要？

2019/06/27 职场文书

世界上超棒的8种逻辑思维

2019/08/06 职场文书

导游词之广西漓江

2019/11/02 职场文书

logback 实现给变量指定默认值

2021/08/30 Java/Android