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 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
Vue.js实现表格渲染的方法
Sep 07 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
基于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基础教程 php内置函数实例教程
2012/08/21 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Sanic框架路由用法实例分析
2018/07/16 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
运动会广播稿200米
2014/01/27 职场文书
绿色小区申报材料
2014/08/22 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
python神经网络ResNet50模型
2022/05/06 Python