基于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下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
JavaScript实现多球运动效果
Sep 07 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
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
Javascript注入技巧
2007/06/22 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
js中日期的加减法
2015/05/06 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
用Django写天气预报查询网站
2018/10/21 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
教师节促销活动方案
2014/02/14 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
职业规划实施方案
2014/06/10 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers