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>