Vue实现web分页组件详解


Posted in Javascript onNovember 28, 2017

本文实例为大家分享了Vue实现web分页组件的具体代码,供大家参考,具体内容如下

效果演示

Vue实现web分页组件详解

源代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试分页 - www.maoyupeng.com</title>
 <style type="text/css">
  body{padding:0; margin: 0; broder:none; } #app {width: 500px; height: 200px; margin: 0 auto; text-align: center; background-color: #cccccc; } #mylink {color: #efefef; } .pagination{list-style: none; text-align: center; height: 50px; padding-top: 50px; } .pagination > li {float: left; margin: 0 5px; } [v-cloak] {display: none; } </style>
</head>
<body>
 <div id="app" v-cloak>
  <ul class="pagination">
   <li>
    <a v-if="currentPage == 1" >首页</a>
    <a v-else href="javascript:;" @click="next(1)">首页</a>
   </li>
   <li v-if="currentPage<=1"><a>上一页</a></li>
   <li v-else><a href="javascript:;" @click="next(currentPage-1)">上一页</a></li>


   <li v-for="item in pagingList">
    <a v-if="currentPage==item.key || sign ==item.key" >{{item.key}}</a>
    <a v-else href="javascript:;" @click="next(item.value)">{{item.key}}</a>
   </li>

   <li v-if="currentPage>=totalPageCount"><a>下一页</a></li>
   <li v-else><a href="javascript:;" @click="next(currentPage+1)">下一页</a></li>
   <li>
    <a v-if="totalPageCount == currentPage">尾页</a>
    <a v-else href="javascript:;" @click="next(totalPageCount)">尾页</a>
   </li>
  </ul>
  <p>共:{{totalPageCount||0}}页,当前页为第{{currentPage||0}}页   设置总页数:<input style="width:20px;" v-model="totalPageCount"></p>
  <a href="http://www.maoyupeng.com/web-pagination-component-for-vue.html" target="_blank" id="mylink">http://www.maoyupeng.com 带注解版本</a>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script type="text/javascript">
  var app = new Vue({
   el: '#app',
   data: {
   // 省略的符号
   sign:'...',
   // 省略号位置
   signIndex:4,
   // 总页数
   totalPageCount: 4,
   // 当前页
   currentPage:1,
   // 显示在页面的数组列表
   pagingList:[]
   },
   watch: {
   totalPageCount (val) {
    var that = this
    if (!val || val == '') return;
    that.currentPage = 1;
    that.init()
   },
   currentPage (val) {
    var that = this
    that.init()
   }
   },
   methods: {
   // 跳转到某页码
   next (num) {
    var that = this
    if (num <= 1) that.currentPage = 1;
    else if (num >= that.totalPageCount) that.currentPage = that.totalPageCount;
    else that.currentPage = num;
   },
   // 初始化数据
   fetchData () {
    var that = this

    that.pagingList = [];
    var tmp = null;


    if ((that.totalPageCount) > 6) {
     if (((that.totalPageCount-1) == (that.totalPageCount - that.currentPage)) && (that.totalPageCount - that.currentPage) > 5) {
      for (var i=1;i<7;i++) {
       if (i < that.signIndex) {
        tmp = {key:i, value:i }
       } else if (i== that.signIndex) {
        tmp = {key:that.sign, value:0 }
       } else if (i == (that.signIndex + 1) ) {
        tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
       } else {
        tmp = {key:that.totalPageCount, value:that.totalPageCount }
       }
       that.pagingList.push(tmp)
      }
     } else if (((that.totalPageCount - that.currentPage) <= that.signIndex)){
      var starNum = that.totalPageCount - 5;
      for (var i=starNum;i<starNum+6;i++) {
       tmp = {key:i, value:i }
       that.pagingList.push(tmp)
      }
     } else {
      var starNum = that.currentPage - 1;
      for (var i=1;i<7;i++) {
       if (i < that.signIndex) {
        tmp = {key:(starNum - 1) + i, value:(starNum - 1) + i }
       } else if (i== that.signIndex) {
        tmp = {key:that.sign, value:0 }
       } else if (i == (that.signIndex + 1) ) {
        tmp = {key:that.totalPageCount - 1, value:that.totalPageCount - 1 }
       } else {
        tmp = {key:that.totalPageCount, value:that.totalPageCount }
       }
       that.pagingList.push(tmp)
      }
     }
    } else {
     for (var i =0; i <that.totalPageCount; i++) {
      tmp = {key:i+1, value:i+1 }
      that.pagingList.push(tmp)
     }
    }
   },
   init () {
    var that = this

    that.fetchData()
   }
   },
   mounted () {
   var that = this

   that.init()
   }
  }) 
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
js精度溢出解决方案
Dec 02 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
C++中的string类的用法小结
Aug 07 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
基于vue2实现左滑删除功能
Nov 28 #Javascript
JavaScript生成简单等差数列
Nov 28 #Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 #Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 #Javascript
浅谈vue中慎用style的scoped属性
Nov 28 #Javascript
元素全屏的设置与监听实例
Nov 28 #Javascript
vue2实现数据请求显示loading图
Nov 28 #Javascript
You might like
PHP中实现进程间通讯
2006/10/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php时间戳转换的示例
2014/03/31 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
简单学习Python time模块
2016/04/29 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
面向对象编程OOP的优点
2013/01/22 面试题
应届生会计求职信
2013/11/11 职场文书
施工班组长岗位职责
2014/01/05 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
汽车维修求职信
2014/06/15 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年残联工作总结
2014/11/21 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
海弦WR-800F
2022/04/05 无线电
Mysql开启外网访问
2022/05/15 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技