基于vue.js的分页插件详解


Posted in Javascript onNovember 27, 2017

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多,请戳http://cn.vuejs.org/

html代码:

<div class="page-bar" v-else> 
 <ul> 
  <li style="width: 11%" v-if="showFirst"> 
  <a v-on:click="cur--"> 
   <<</a> 
  </li> 
  <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> 
  <a v-on:click="btnClick(index)">{{index}}</a> 
  </li> 
  <li style="width: 11%" v-if="showLast"><a v-on:click="cur++"> >></a></li> 
  <li style="width: 22%;margin-left: 7%"><a>共<i>{{all}}</i>页</a></li> 
 </ul> 
 </div>

css部分,可根据自己的实际需要进行调整:

.page-bar { 
 margin-top: 21px; 
 margin-left: 11%; 
 } 
 
 .page-bar ul, 
 .page-bar li { 
 margin: 0px; 
 padding: 0px; 
 } 
 
 .page-bar ul li { 
 list-style: none; 
 border: 1px solid #ddd; 
 text-decoration: none; 
 position: relative; 
 float: left; 
 text-align: center; 
 padding: 1px 0; 
 margin-left: -1px; 
 line-height: 1.42857143; 
 color: #337ab7; 
 cursor: pointer; 
 width: 8%; 
 } 
 
 .page-bar li:first-child>a { 
 margin-left: 0px 
 } 
 
 .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; 
 }

js部分:

首先要创建一个基本组件

var vm = new Vue({ 
 el: 'body', 
 data: { 
 list: null, 
 all: 1, //总页数 
 cur: 1, //当前页码 
 },

继而要利用computed计算页码,

computed: { 
 indexs: function(index) { 
 var left = 1; 
 var right = this.all; 
 var ar = []; 
 if (this.all >= 11) { 
  if (this.cur > 5 && this.cur < this.all - 4) { 
  left = this.cur - 5; 
  right = this.cur + 4; 
  } else { 
  if (this.cur <= 5) { 
  left = 1; 
  right = 10; 
  } else { 
  right = this.all; 
  left = this.all - 9; 
  } 
  } 
 } 
 while (left <= right) { 
  ar.push(left); 
  left++; 
 } 
 return ar; 
 }, 
 showLast: function() { 
 if (this.cur == this.all) { 
  return false 
 } 
 return true 
 }, 
 showFirst: function() { 
 if (this.cur == 1) { 
  return false 
 } 
 return true 
 } 
 }

要给 元素加v-on:click="cur++"事件,所以要在vue里加method方法:

methods: { 
 btnClick: function(items) { //页码点击事件 
 if (items != this.cur) { 
  this.cur = items 
 } 
 } 
},

其实到这里基本上就差不多了,但是可以优化一下,当用户触发点击事件时,页面发生改变,这时要通知其他组件做出改变。

watch: { 
 cur: function(oldValue, newValue) { 
 console.log(arguments) 
 
 } 
 }

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

后期会在个人GitHub上提交完整版代码

补充效果图展示

基于vue.js的分页插件详解

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

Javascript 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
webpack构建换肤功能的思路详解
Nov 27 #Javascript
vue实现商城上货组件简易版
Nov 27 #Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 #Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 #Javascript
vue实现商城购物车功能
Nov 27 #Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 #Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 #Javascript
You might like
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
phpinfo的知识点总结
2019/10/10 PHP
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Vue实现日历小插件
2019/06/26 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python中print和return的作用及区别解析
2019/05/05 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
主管职责范文
2013/11/09 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
法律进社区实施方案
2014/03/21 职场文书
员工安全承诺书
2014/05/22 职场文书
个人维稳承诺书
2015/05/04 职场文书
开场白怎么写
2015/06/01 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书