基于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精度溢出解决方案
Dec 02 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
vue+swiper实现左右滑动的测试题功能
Oct 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
php操作mysqli(示例代码)
2013/10/28 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
js实现图片上传并预览功能
2018/08/06 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
小程序实现分类页
2019/07/12 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python多继承顺序实例分析
2018/05/26 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
餐饮主管岗位职责
2013/12/10 职场文书
运动会广播稿400字
2014/01/25 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
八一建军节慰问信
2015/02/14 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
法定授权委托证明书
2015/06/18 职场文书