基于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 new fun的执行过程
Aug 05 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Node 代理访问的实现
Sep 19 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
vue中jsonp插件的使用方法示例
Sep 10 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面试题集锦
2012/03/08 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
php获取linux命令结果的实例
2017/03/13 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python实现词法分析器
2019/01/31 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
加强作风建设演讲稿
2014/10/24 职场文书
世界遗产导游词
2015/02/13 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python