基于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 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
Vue实现简单分页器
Dec 29 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
Echarts如何重新渲染实例详解
May 30 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
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
ie 调试javascript的工具
2009/04/29 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python 列表反转显示的四种方法
2020/11/16 Python
如何用PHP实现邮件发送
2012/12/26 面试题
接口中的方法可以是abstract的吗
2015/07/23 面试题
大学生个人求职信范文
2013/09/21 职场文书
网站编辑求职信
2013/10/17 职场文书
合作经营协议书
2014/04/17 职场文书
留学推荐信范文
2014/05/10 职场文书
商务宴会祝酒词
2015/08/11 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
HttpClient实现文件上传功能
2022/08/14 Java/Android