分页思路：
首先是定义页号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>
评论已关闭