JavaScript
搜索
分类

Vue实现web分页组件详解

作者：毛宇鹏 时间：2024-04-30 10:39:27　

本文实例为大家分享了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}}页&nbsp;&nbsp;&nbsp;设置总页数:<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>

来源：http://www.maoyupeng.com/web-pagination-component-for-vue.html

标签：Vue,web,分页组件
0
投稿

猜你喜欢

  • 利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例

    2022-11-30 20:40:01

  • 关于keras中的Reshape用法

    2021-11-08 00:04:12

  • MAC系统IDEA颜值插件MaterialThemeUI

    2022-12-26 00:29:07

  • vue如何解决空格和空行报错的问题

    2024-04-27 16:18:20

  • ASP连接SQL2005数据库连接代码

    2011-03-25 10:44:00

  • 基于python生成器封装的协程类

    2022-09-25 04:57:53

  • python网络编程学习笔记(四)：域名系统

    2021-07-15 10:16:49

  • MySQL创建数据表时设定引擎MyISAM/InnoDB操作

    2024-01-20 18:28:58

  • MySql在Mac上的安装与配置详解

    2024-01-27 03:09:52

  • 如何基于Python + requests实现发送HTTP请求

    2022-04-17 09:27:09

  • asp如何做一个树状展开视图来显示自己的记录结构？

    2010-07-12 18:56:00

  • MySQL最基本的命令使用汇总

    2024-01-28 06:18:30

  • Python实现手写一个类似django的web框架示例

    2022-06-18 03:17:26

  • Python数据模型与Python对象模型的相关总结

    2021-05-15 02:21:43

  • python编译pyc文件的过程解析

    2022-08-13 20:48:19

  • python中文件操作与异常的处理图文详解

    2021-09-04 16:04:33

  • python实现redis三种cas事务操作

    2022-08-27 01:50:59

  • js+ajax实现获取文件大小的方法

    2023-08-12 00:22:07

  • asp如何最准确地统计在线用户数？

    2010-07-11 21:12:00

  • 基于javascript实现tab切换特效

    2024-02-24 12:31:58
    • asp之家 网络编程 m.aspxhome.com