基于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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
详解Django中的权限和组以及消息
2015/07/23 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
单位在职证明范本
2014/01/09 职场文书
慰问信模板
2015/02/14 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
开业庆典致辞
2015/08/01 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
python pygame入门教程
2021/06/01 Python
Django rest framework如何自定义用户表
2021/06/09 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技