基于vue.js实现的分页


Posted in Javascript onMarch 13, 2018

本文主要介绍基于vue的分页原生写法。

先po上效果图:

基于vue.js实现的分页

html部分,将page作为一个单独的组件

<script type="text/x-template" id="page">
  <ul class="pagination">
   <li v-show="current != 1" @click="current-- && goto(current)">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a>
   </li>
   <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{index}}</a>
   </li>
   <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>
   </li>
  </ul>
 </script>
 <div id="app">
  <page></page>
 </div>

js部分:

<script>
  Vue.component("page", {
   template: "#page",
   data: function () {
    return {
     current: 1, // 当前页码
     showItem: 5, // 最少显示5个页码
     allpage: 13 // 总共的
    }
   },
   computed: {
    pages: function () {
     var pag = [];
     if (this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
      //总页数和要显示的条数那个大就显示多少条
      var i = Math.min(this.showItem, this.allpage);
      while (i) {
       pag.unshift(i--);
      }
     } else { //当前页数大于显示页数了
      var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
       i = this.showItem;
      if (middle > (this.allpage - this.showItem)) {
       middle = (this.allpage - this.showItem) + 1
      }
      while (i--) {
       pag.push(middle++);
      }
     }
     return pag
    }
   },
   methods: {
    goto: function (index) {
     if (index == this.current) return;
     this.current = index;
     //这里可以发送ajax请求
    }
   }
  })
  var vm = new Vue({
   el: '#app',
  })
 </script>

css部分:

body {
   font-family: "Segoe UI";
  }
  li {
   list-style: none;
  }
  a {
   text-decoration: none;
  }
  .pagination {
   position: relative;
  }
  .pagination li {
   display: inline-block;
   margin: 0 5px;
  }
  .pagination li a {
   padding: .5rem 1rem;
   display: inline-block;
   border: 1px solid #ddd;
   background: #fff;
   color: #0E90D2;
  }
  .pagination li a:hover {
   background: #eee;
  }
  .pagination li.active a {
   background: #0E90D2;
   color: #fff;
  }

最后附上github地址:https://github.com/AmberWuWu/vue-page

总结

以上所述是小编给大家介绍的基于vue.js实现的分页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 #Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 #Javascript
vue加载自定义的js文件方法
Mar 13 #Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 #Javascript
vue页面离开后执行函数的实例
Mar 13 #Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 #Javascript
You might like
基于mysql的论坛(1)
2006/10/09 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python类的实例化问题解决
2019/08/31 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python如何求圆的面积
2020/07/01 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
某公司.Net方向面试题
2014/04/24 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
公司授权委托书范文
2014/09/21 职场文书
个人租房协议书范本
2014/09/30 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL