Vue 实现分页效果 代码实例

分页思路：

首先是定义页号currentPage 和 页大小pagesize，用一个数组保存总数据；

用一个计算属性page_arrs，作用是 让页面展示的是我们所需要的页面

而我们在page_arrs中要分割原数组，用一个slice()方法进行分割；

在控件button上绑定点击方法，对页号currentPage进行修改，从而修改整个页面展示

Python Django vue {{}} 括号冲突 问题 解决 图文教程

分页css采用了bootstrap的标准代码，在使用时直接引用bootstrap的css即可。

Javascript代码：

var app = new Vue({     delimiters:['{[', ']}'],//区分django的模板标记     el: '#app',     data: {         arrs: {{goods|safe}},//django模板中原样输出         titles : ['序号','服务商','机房',"CPU",'内存','硬盘','带宽','流量','线路','IPV4','架构','价格','库存'],         currentPage : 1,//当前页号         pagesize :12, //每页大小         all:0,//总页数     },　　     filters:{         formatPrice: function(obj){             $str = '';             if(obj.annual)                 $str += '$'+obj.annual+'/年<br/>';             if(obj.quarter)                 $str += '$'+obj.quarter+'/季<br/>';             if(obj.month)                 $str += '$'+obj.month+'/月<br/>';             return $str;         },         stockToBuy: function(obj){             if( obj.stock === 1 ){                 return '<a href="//jiloc.com/go/bwh-'+obj.pid+'" class="btn btn-primary active" role="button" aria-pressed="true">购买</a>';             }else{                 return '<button class="btn btn-secondary" disabled="true">售罄</button>';             }         }     },     created: function () {         var self = this;         // $.ajax({         //     // url: 'https://vpsdalao.com/api/records?provider=Bandwagon',         //     url: '/ajax_goods',         //     type: 'get',         //     data: {},         //     dataType: 'json'         // }).then(function (res) {         //     // console.log(res.data)         //     self.items = res.data         // }).fail(function () {         //     console.log('失败');         // })     },     computed:{         page_arrs(){             let {currentPage,pagesize,all} = this             this.all = Math.ceil(this.arrs.length/pagesize)             return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)         },         indexs: function(){             var left = 1;             var right = this.all;             var ar = [];             if(this.all>= 5){                 if(this.currentPage > 3 && this.currentPage < this.all-2){                     left = this.currentPage - 2                     right = this.currentPage + 2                 }else{                     if(this.currentPage<=3){                         left = 1                         right = 5                     }else{                         right = this.all                         left = this.all -4                     }                 }             }             while (left <= right){                 ar.push(left)                 left ++             }             return ar         },         current_page(){             return this.currentPage         }     },     methods: {         primaryPage(){             this.currentPage = 1         },         prePage(){             if(this.currentPage == 1){                 return             }             this.currentPage = this.currentPage - 1         },         nextPage(){             if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){                 return             }             this.currentPage = this.currentPage + 1         },         lastPage(){             this.currentPage = Math.ceil(this.arrs.length/this.pagesize)         },         btnClick: function(data){//页码点击事件             if(data != this.currentPage){                 this.currentPage = data              }         },     },  })

HTML代码部分

    <div class="container-fluid" id="app">         <section class="text-center">             <h1>VPS库存监控列表</h1>             <p><a href="//jiloc.com/go/bwh">搬瓦工</a>优惠码：<code>BWH3HYATVBJW</code> ,             <p>数据最后更新时间：<code>{{update_time}}</code></p>         </section>          <table class="table table-striped table-bordered table-hover">             <thead>             <tr>                 <th v-for="title in titles">{[title]}</th>             </tr>             </thead>             <tbody>             <tr v-for="(item,index) in page_arrs" :key="index">                 <td>{[index+1]}#</td>                 <td>{[item.company__name]}</td>                 <td>{[item.dc]}</td>                 <td>{[item.cpu]}</td>                 <td>{[item.ram]}</td>                 <td>{[item.disk]}</td>                 <td>{[item.bandwidth]}</td>                 <td>{[item.traffic]}</td>                 <td>{[item.route]}</td>                 <td>{[item.ipv4]}</td>                 <td>{[item.arch]}</td>                 <td v-html="$options.filters.formatPrice(item)"></td>                 <td v-html="$options.filters.stockToBuy(item)" ></td>             </tr>             </tbody>         </table>          <nav aria-label="Page navigation">             <ul class="pagination  justify-content-center">               <li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="primaryPage"> << </a></li>               <li :class="current_page == 1 ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="prePage"> < </a></li>               <li v-for="index in indexs" :class="current_page == index ? 'page-item active' : 'page-item' "><a class="page-link" href="#"  @click="btnClick(index)">{[ index ]}</a></li>               <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true">{[current_page]} / {[all]}</a></li>               <li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="nextPage()"> > </a></li>               <li :class="current_page == all ? 'page-item disabled' : 'page-item' "><a class="page-link" href="#" @click="lastPage"> >> </a></li>             </ul>         </nav>      </div>

腾讯云限时秒杀【点击购买】

搬瓦工，CN2高速线路，1GB带宽，电信联通优化KVM，延迟低，速度快，建站稳定，搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ，支持<支付宝> 【点击购买】！

Vultr$3.5的日本节点，512M内存/500G流量/1G带宽，电信联通优化，延迟低，速度快【点击购买】！

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付￥288【点击购买】

`微信`扫码 加好友