在Vue中如何实现web分页组件-js教程-PHP中文网

首页

web前端

js教程

在Vue中如何实现web分页组件

亚连

Jun 23, 2018 pm 05:44 PM

vueweb

这篇文章主要为大家详细介绍了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>
 <p 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>
 </p>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script type="text/javascript">
  var app = new Vue({
   el: &#39;#app&#39;,
   data: {
   // 省略的符号
   sign:&#39;...&#39;,
   // 省略号位置
   signIndex:4,
   // 总页数
   totalPageCount: 4,
   // 当前页
   currentPage:1,
   // 显示在页面的数组列表
   pagingList:[]
   },
   watch: {
   totalPageCount (val) {
    var that = this
    if (!val || val == &#39;&#39;) 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>

上面是我整理给大家的，希望今后会对大家有帮助。

使用CommonsChunkPlugin如何做才能抽取公共模块

在AngularJS中有关于MVC的复杂操作

在jQuery中如何实现动态数据分页

在React中如何实现组件内部通信

以上是在Vue中如何实现web分页组件的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。