基于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 拖动表格行实现代码
May 05 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
web方式ftp
2006/10/09 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
基于jQuery实现表单提交验证
2014/11/24 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python fileinput模块使用介绍
2014/11/30 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python callable()函数用法实例分析
2018/03/17 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python模糊图片过滤的方法
2018/12/14 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python实现简单坦克大战
2020/03/27 Python
深入分析python 排序
2020/08/24 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
大学四年个人自我小结
2014/03/05 职场文书
四群教育工作实施方案
2014/03/26 职场文书
网站美工岗位职责
2014/04/02 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
汽车销售员工作总结
2015/08/12 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
社会实践心得体会范文
2016/01/14 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL