用Vue2.0实现简单的分页及跳转

2018年07月26日 20:29:51 Freya_yyy 阅读数 3369
 
 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Freya_yyy/article/details/81227016

用Vue2.0实现一个数据的分页及页数的跳转，代码如下：

  • 数据绑定：{{...}}        <a v-on:click="btnClick(item)">{{item}}</a>
  • 事件绑定：v-on        <a v-on:click="cur--,pageClick()">上一页</a>
  • 判断：v-if                 <li v-if="cur==1"><a class="banclick">上一页</a></li>
  • 循环：v-for              <li v-for="item in indexs" v-bind:class="{'active':cur==item}"></li>
  • 修改样式：v-bind绑定class属性        <li v-for="item in indexs" v-bind:class="{'active':cur==item}"></li>

HTML代码如下：

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
    <title>分页</title>
  6.  
    <style>
  7.  
    *{margin: 0;padding: 0;}
  8.  
    #page-break{margin-top: 20px;margin-left: 20px;}
  9.  
    #page-break li{list-style: none;}
  10.  
    #page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
  11.  
    #page-break a:hover{background-color: #eee;}
  12.  
    #page-break a .banclick{cursor: not-allowed;}
  13.  
    #page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
  14.  
    #page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
  15.  
    #page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}
  16.  
    #page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
  17.  
    #page-break .jumpbox .jumpbtn:active {color: #337ab7;}
  18.  
    </style>
  19.  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20.  
    </head>
  21.  
    <body>
  22.  
    <div id="page-break">
  23.  
    <ul>
  24.  
    <li v-if="cur>1">
  25.  
    <a v-on:click="cur--,pageClick()">上一页</a>
  26.  
    </li>
  27.  
    <li v-if="cur==1">
  28.  
    <a class="banclick">上一页</a>
  29.  
    </li>
  30.  
    <li v-for="item in indexs" v-bind:class="{'active':cur==item}">
  31.  
    <a v-on:click="btnClick(item), pageClick()">{{item}}</a>
  32.  
    </li>
  33.  
    <li v-if="cur!=all">
  34.  
    <a v-on:click="cur++,pageClick()">下一页</a>
  35.  
    </li>
  36.  
    <li v-if="cur==all">
  37.  
    <a class="banclick">下一页</a>
  38.  
    </li>
  39.  
    <li><a>共<i>{{all}}</i>页</a></li>
  40.  
    <div class="jumpbox">
  41.  
    <input type="number" class="jumppage" />
  42.  
    <a class="jumpbtn" v-on:click="pageSkip()">跳转</a>
  43.  
    </div>
  44.  
    </ul>
  45.  
    </div>
  46.  
    </body>
  47.  
    </html>
  48.  
     

js代码如下：

  1.  
    new Vue({
  2.  
    el: '#page-break',
  3.  
    data: {
  4.  
    cur: 1,
  5.  
    all: 20
  6.  
    },
  7.  
    watch: {
  8.  
    cur: function(newValue, oldValue){
  9.  
    console.log(arguments);
  10.  
    }
  11.  
    },
  12.  
    methods: {
  13.  
    btnClick(num){
  14.  
    if(num!=this.cur){
  15.  
    this.cur=num;
  16.  
    }
  17.  
    },
  18.  
    pageClick(){
  19.  
    console.log('现在是'+this.cur+'页')
  20.  
    },
  21.  
    pageSkip(){
  22.  
    var maxPage = this.all;
  23.  
    var skipPage = Number(document.getElementsByClassName("jumppage")[0].value);
  24.  
    console.log(typeof skipPage);
  25.  
    if(!skipPage){
  26.  
    alert("请输入跳转页码");
  27.  
    return;
  28.  
    }else if(skipPage<1 || skipPage>maxPage){
  29.  
    alert("您输入的页码超过页数范围了！");
  30.  
    return;
  31.  
    }else{
  32.  
    //this.cur=skipPage;
  33.  
    this.btnClick(skipPage);
  34.  
    this.pageClick();
  35.  
    }
  36.  
    }
  37.  
    },
  38.  
    computed: {
  39.  
    indexs(){
  40.  
    var left = 1;
  41.  
    var right = this.all;
  42.  
    var arr = [];
  43.  
    if(this.all>=7){
  44.  
    if(this.cur>4 && this.cur<this.all-3){
  45.  
    left = this.cur-3;
  46.  
    right = this.cur+3;
  47.  
    }else if(this.cur<=4){
  48.  
    left=1;
  49.  
    right=7;
  50.  
    }else{
  51.  
    left=this.all-6;
  52.  
    right=this.all;
  53.  
    }
  54.  
    }
  55.  
    while(left<=right){
  56.  
    arr.push(left);
  57.  
    left++;
  58.  
    }
  59.  
    return arr;
  60.  
    }
  61.  
    }
  62.  
    })

分页显示如下：

用Vue2.0实现简单的分页及跳转的更多相关文章

  1. 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...

  2. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  3. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...

  4. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  5. 采用Vue2.0开发的分页js组件

    2017-11-17 19:14:23 基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js 由于项目需求,要求使用 Vue2.0 开 ...

  6. Vue2.0 分页插件pagination使用详细说明

    Vue2.0 分页pagination使用 插件下载地址:Vue_Pagination 插件描述:基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.j ...

  7. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  8. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  9. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

随机推荐

  1. 数据库索引数据结构总结——ART树就是前缀树

    数据库索引数据结构总结 from:https://zhewuzhou.github.io/2018/10/18/Database-Indexes/ 摘要 数据库索引是数据库中最重要的组成部分,而索引的 ...

  2. P1941 飞扬的小鸟[dp]

    题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣 ...

  3. 使用Apache commons-maths3-3.6.1.jar包进行简单的数据统计分析（java）

    使用maths3函数进行简单的数据统计性描述: 使用场景:本地,直接运行就可以: 具体后面有个性化的需求,可以再修改~ package com; import org.apache.commons.l ...

  4. 合并K个有序链表

    方法一:采用归并的思想将链表两两合并,再将两两合并后的链表做同样的操作直到合并为只有一个新的链表为止. 归类的时间复杂度是O(logn),合并两个链表的时间复杂度是O(n),则总的时间复杂度大概是O( ...

  5. java代码实现文件的下载功能

    昨天,根据需求文档的要求,自己要做一个关于文件下载的功能,从学校毕业已经很久了,自己好长时间都没有做过这个了,于是自己上网百度,最终开发出来的代码如下: 哦!对了,我先说一下我的思路,首先需要获取服务 ...

  6. AD域与信任关系

    域与信任关系:信任关系分为两种,一种是林中信任关系,另一种是林之间的信任关系. 林中信任关系的特点: 注意:林中信任关系还可以分为两种:一种是父子信任,还有一种是树根信任. 父子信任:在同一个树域之中 ...

  7. jsp解决大文件断点续传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  8. 2019.12.10 switch（）{ case： }

    if 适合判断范围 switch 适合判断某个值 两种方法: import java.util.Scanner; class Demo02 { public static void main(Stri ...

  9. 洛谷P3205 合唱队

    题目 区间dp.但是跟平常的区间dp不同的是,这个题仅仅只是运用了区间dp的通过小区间的信息更新大区间的信息,而没有运用枚举断点的区间dp一般思路. 这个题我们首先发现每个人在插入的时候一定插入到队伍 ...

  10. USACO 重排干草&&BZOJ1045

    USACO 重排干草&&BZOJ1045 Description 约翰订购了很多干草,他在农场里标记了 N 个位置.这些位置近似地构成一个圆环.他原打算 让送货司机在 i 号位卸下 B ...