首页 JS特效 jQuery特效 jQuery 分页插件代码

jQuery 分页插件代码

jQuery 分页插件代码

jQuery 分页插件代码

js代码

  <script src="js/vue.js"></script>
  <script>
    var newlist = new Vue({
      el: '#app',
      data: {
        current_page: 1, //当前页
        pages: 50, //总页数
        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) {
          this.current_page = id;
        },
      },

    })
  </script>
一款带跳转功能的vue.js分页插件代码,功能全齐全的vue分页组件,vue.js使用computed计算属性,数据变动执行对应的函数分页代码。 

免责声明

本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn

相关文章

jQuery ajax分页插件实例代码_jquery jQuery ajax分页插件实例代码_jquery

16 May 2016

这篇文章主要介绍了jQuery ajax分页插件实例代码的相关资料,本文介绍的非常详细,具有参考借鉴价值,特此分享供大家学习

jQuery插件pagination实现分页特效_jquery jQuery插件pagination实现分页特效_jquery

16 May 2016

jQuery分页插件示例,ajax方式的jQuery前端分页插件,其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便。

jquery css3打造一款ajax分页插件(自写)_jquery jquery css3打造一款ajax分页插件(自写)_jquery

16 May 2016

这篇文章主要介绍了自己写的一款ajax分页插件,用jquery css3打造支持IE6 ,但没有动画效果,需要的朋友可以参考下

jQuery实现图片轮播特效代码分享_jquery jQuery实现图片轮播特效代码分享_jquery

16 May 2016

这篇文章主要介绍了jQuery实现图片轮播特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下。

用jquery中插件dialog实现弹框效果实例代码_jquery 用jquery中插件dialog实现弹框效果实例代码_jquery

16 May 2016

这篇文章介绍了jquery中插件dialog实现弹框效果实例代码,有需要的朋友可以参考一下

jquery 分页控件实现代码_jquery jquery 分页控件实现代码_jquery

16 May 2016

花了几个小时用jqury写的分页效果实现,功能基本实现需要再封装下 呵呵~~

jQuery超精致图片轮播幻灯片特效代码分享_jquery jQuery超精致图片轮播幻灯片特效代码分享_jquery

16 May 2016

这篇文章主要介绍了jQuery超精致图片轮播幻灯片特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下。

jQuery插件jcrop Fileapi完美实现图片上传 裁剪 预览的代码分享_jquery jQuery插件jcrop Fileapi完美实现图片上传 裁剪 预览的代码分享_jquery

16 May 2016

这篇文章主要介绍了jQuery插件jcrop Fileapi完美实现图片上传 裁剪 预览的代码,非常的简单实用,效果也很棒,有需要的小伙伴可以参考下。

jQuery带进度条全屏图片轮播特效代码分享_jquery jQuery带进度条全屏图片轮播特效代码分享_jquery

16 May 2016

这篇文章主要介绍了jQuery带进度条全屏图片轮播特效,图片轮播效果特别适合做产品展示,还带有进度条转接全屏图片展示,感兴趣的小伙伴可以参考下。

See all articles See all articles

Hot Tools

jQuery2019情人节表白放烟花动画特效

jQuery2019情人节表白放烟花动画特效

一款抖音上很火的jQuery情人节表白放烟花动画特效,适合程序员、技术宅用来向心爱的姑娘表白,无论你选择愿意还是不愿意,到最后都得同意。

layui响应式动画登录界面模板

layui响应式动画登录界面模板

layui响应式动画登录界面模板

520情人节表白网页动画特效

520情人节表白网页动画特效

jQuery情人节表白动画、520表白背景动画

炫酷的系统登录页

炫酷的系统登录页

炫酷的系统登录页

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER

HTML5磁带音乐播放器-CASSETTE PLAYER