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

Posted developer-ios

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用Vue2.0实现简单的分页及跳转相关的知识，希望对你有一定的参考价值。

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

2018年07月26日 20:29:51  阅读数 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-breakmargin-top: 20px;margin-left: 20px;
  9.  
    #page-break lilist-style: none;
  10.  
    #page-break aborder: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer
  11.  
    #page-break a:hoverbackground-color: #eee;
  12.  
    #page-break a .banclickcursor: not-allowed;
  13.  
    #page-break .active acolor: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;
  14.  
    #page-break ifont-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实现简单的分页及跳转的主要内容，如果未能解决你的问题，请参考以下文章

基于VUE2.0的分页插件（很好用，很简单）

datatables分页及跳转

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

Vue2.0+ElementUI实现表格翻页

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

超简单的vue2.0分页组件