基于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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
javascript文本模板用法实例
Jul 31 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python的变量与赋值详细分析
2017/11/08 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
使用TensorFlow实现SVM
2018/09/06 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python如何将模块打包并发布
2020/08/30 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
商铺消防安全责任书
2014/07/29 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014公司年终工作总结
2014/12/19 职场文书
给客户的感谢信
2015/01/21 职场文书
黄埔军校观后感
2015/06/10 职场文书
告知书格式
2015/07/01 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python