基于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 相关文章推荐
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
element多个表单校验的实现
May 27 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php中__toString()方法用法示例
2016/12/07 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
详解angular element()方法使用
2017/04/08 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
市场推广策划方案
2014/06/02 职场文书
学校创先争优活动总结
2014/08/28 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
保研推荐信范文
2015/03/25 职场文书
小学生安全保证书
2015/05/09 职场文书
关于保护环境的建议书
2019/06/24 职场文书
话题作文之关于呼唤
2019/11/29 职场文书