基于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 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JSONP基础知识详解
2017/03/19 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python学习之time模块的基本使用
2021/01/17 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
开展批评与自我批评心得体会
2014/10/17 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
担保书格式
2015/01/20 职场文书
体育活动总结
2015/02/04 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
golang中的空slice案例
2021/04/27 Golang