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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
javascript倒计时效果实现
Nov 12 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
JS数组中对象去重操作示例
Jun 04 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 sprintf()函数用例解析
2011/05/18 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
关于python的list相关知识(推荐)
2017/08/30 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
pytorch实现线性拟合方式
2020/01/15 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Pycharm github配置实现过程图解
2020/10/13 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
执行力心得体会
2013/12/31 职场文书
安全事故检讨书
2014/01/18 职场文书
文明寝室申报材料
2014/05/12 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
办公室岗位职责范本
2015/04/11 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python