基于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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
js常用正则表达式集锦
May 17 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php5.2时间相差8小时
2007/01/15 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
浅谈Vue.js
2017/03/02 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Pycharm更换python解释器的方法
2018/10/29 Python
详解Python循环作用域与闭包
2019/03/21 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Pytorch转tflite方式
2020/05/25 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
教师自我评价范例
2013/09/24 职场文书
高校教师自荐信范文
2014/03/13 职场文书
趣味运动会简讯
2015/07/20 职场文书
办公室日常管理制度
2015/08/04 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电