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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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 Stream_*系列函数
2010/08/01 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
JS实现密码框效果
2020/09/10 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python爬取京东的商品分类与链接
2016/08/26 Python
Python实现的归并排序算法示例
2017/11/21 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python调用外部程序的实操步骤
2019/03/04 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
iPython pylab模式启动方式
2020/04/24 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
python能开发游戏吗
2020/06/11 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
社会学专业求职信
2014/02/24 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书