vue分页插件的使用方法

 更新时间:2019年12月25日 08:56:03   作者:92.4  
这篇文章主要介绍了vue分页插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下

分页插件代码:

<div>
  <div class="page">
   <div class="pagelist">
      <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span>
      <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
      <span class="ellipsis" v-show="efont">...</span>
      <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
        @click="jumpPage(num)">{{num}}</span>
      <span class="ellipsis" v-show="ebehind">...</span>
 
      <span :class="{disabled:pend}" class="jump" @click="addPage()">下一页</span>
      <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
 
     <#--<span class="jumppoint">跳转到:</span>-->
     <#--<span class="jumpinp"><input type="text" v-model="changePage"></span>-->
     <#--<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>-->
   </div>
  </div>
</div>

vue代码

data: {
  current_page: result.resultObj.number + 1, //当前页
  pages: result.resultObj.totalPages, //总页数
  changePage: '',//跳转页
  nowIndex: 0
    },
  computed: {
    show: function () {
     return this.pages && this.pages != 1
   },
  pstart: function () {
    return this.current_page == 1;
   },
  pend: function () {
    return this.current_page == this.pages;
     },
   efont: function () {
    if (this.pages <= 7) return false;
      return this.current_page > 5
     },
   ebehind: function () {
      if (this.pages <= 7) return false;
      var nowAy = this.indexs;
      return nowAy[nowAy.length - 1] != this.pages;
     },
    indexs: function () {
 
      var left = 1,
        right = this.pages,
        ar = [];
   if (this.pages >= 7) {
     if (this.current_page > 5 && this.current_page < this.pages -4){
        left = Number(this.current_page) - 3;
        right = Number(this.current_page) + 3;
       } else {
        if (this.current_page <= 5) {
         left = 1;
         right = 7;
        } else {
         right = this.pages;
 
         left = this.pages - 6;
        }
       }
      }
    while (left <= right) {
       ar.push(left);
       left++;
      }
      return ar;
     },
    },
    methods: {
     jumpPage: function (id) {
      if (id <= this.pages && id >= 1) {
       this.current_page = id;
       loadData(this.current_page - 1, size);
      }
     },
    lessPage: function () {
      this.current_page--;
      loadData(this.current_page - 1, size);
     },
    addPage: function () {
      this.current_page++;
      loadData(this.current_page - 1, size);
   }
}

使用说明:

直接拷贝即可使用,只需要修改总页数、当前页。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue动态设置图片时src不生效的原因及解决方法

    Vue动态设置图片时src不生效的原因及解决方法

    这篇文章主要介绍了Vue动态设置图片时src不生效的原因及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue实现文字检索时候将搜索内容标红功能

    vue实现文字检索时候将搜索内容标红功能

    这篇文章主要介绍了vue中实现文字检索时候将搜索内容标红,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue面试必备之防抖和节流的使用

    Vue面试必备之防抖和节流的使用

    在这篇文章中,大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者(watchers)以及事件处理程序,文中的示例代码简洁易懂,希望对大家有所帮助
    2023-03-03
  • vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能

    vue实现图片下载点击按钮弹出本地窗口选择自定义保存路径功能

    vue前端实现前端下载,并实现点击按钮弹出本地窗口,选择自定义保存路径,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • vue登录路由验证的实现

    vue登录路由验证的实现

    这篇文章主要为大家详细介绍了vue登录路由验证的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • vue设置代理不起作用问题及解决

    vue设置代理不起作用问题及解决

    这篇文章主要介绍了vue设置代理不起作用问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Vue transition过渡组件详解

    Vue transition过渡组件详解

    我们现在可以了解一下vue的过渡,vue在插入、更新以及移除DOM元素的时候,提供了很多不同方式过渡的效果,如果在css过渡自动应用class,在过渡钩子函数中使用JavaScript直接操作DOM就可以了
    2022-08-08
  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

    Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡
    2020-02-02

最新评论