基于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 相关文章推荐
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
小程序实现多选框功能
Oct 30 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
微信小程序中实现手指缩放图片的示例代码
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
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
浅析Python中的join()方法的使用
2015/05/19 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
考试不及格的检讨书
2014/01/22 职场文书
校园活动宣传方案
2014/03/28 职场文书
班级标语大全
2014/06/21 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书