vuejs2.0实现一个简单的分页示例

最近几个项目用上vue了项目又刚好需要一个分页功能。于是百度发现几篇文章介绍的实在方式有点复杂,没耐心看自己动手写了一个

用js实现的分页结果如图所示:

css

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; }

模版

rush:js;">

js

rush:js;"> var pageBar = new Vue({ el: '.page-bar',data: { all: 20,//总页数 cur: 1,//当前页码 });

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.

el就是element的缩写,定位模版的位置.data就是数据了.

知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.

所以我们要用computed

= 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 }

}

看一下页面显示出来的循环:

rush:js;">
  • v-for是循环渲染输出计算属性indexs.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件,我把index当参数传进入了,后面做判断,默认传event事件. 然后我们给Vue的选项里面再增加methods字段

    组件交互

    组件写完了,问题来了,用户点击发生页面改变,你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下,插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

    观察了cur数据当它改变的时候,可以获取前后值。然后通知其他组件。

    完整的代码:

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    相关文章

    这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
    欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
    前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
    组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
    相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
    前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...