Vue实现静态数据分页

<div style="padding:20px;" id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">用户管理</div>
        <table class="table table-bordered table-striped text-center">
            <thead>
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>毕业学校</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(row, index) in rows ">
                <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                    <td>{{row.Name}}</td>
                    <td>{{row.share}}</td>
                    <td>{{row.eth}}</td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <nav style="float:right;">
        <ul class="pagination pagination-lg">
            <template v-for="page in Math.ceil(rows.length/pagesize)">
                <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a class="numpage"><</a></li>
                <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a>{{page}}</a></li>
                <li v-else v-on:click="NumPage(page, $event)"><a>{{page}}</a></li>
                <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a class="numpage">></a></li>
            </template>
        </ul>
    </nav>
</div>
<script>
   data:function () {
    return{
        rows: [   
                { Id: 1, Name: '0x123456789123456789123456789123456789', share:'1.234%', eth: '123456789'},
                { Id: 2, Name: '0x123456789123456789852963741951624753', share:'2.234%', eth: '123256789' },
                { Id: 3, Name: '0xehy123ijg158hty852123456789123456789', share:'0.214%', eth: '125656789' },
                { Id: 4, Name: '0x123456789jhg254yvg369521shr123456789', share:'0.234%', eth: '123456859'},
                { Id: 5, Name: '0x123456789123456789tgf257jyh365agrybs', share:'1.534%', eth: '122586789' },
                { Id: 6, Name: '0x204hgt26124578hybt123456789123456789', share:'1.274%', eth: '123963789' },
                { Id: 7, Name: '0x123456789yhtgtr95636581shty123456789', share:'2.234%', eth: '123159789' },
                { Id: 8, Name: '0x123456789123456789huygyt215852saftyj', share:'3.234%', eth: '123576789' },
                { Id: 9, Name: '0x258369jinqyrgsfa58123456789123456789', share:'1.254%', eth: '123741789' },
                { Id: 10, Name: '0x123shrygt123456789123456789123456789', share:'1.934%', eth: '123852789'},
                { Id: 11, Name: '0x123456789256shrysju12345678912345679', share:'4.234%', eth: '104956789'},
        ],
        pagesize: 5,
        curpage:1,//当前页的页码
    }
},
methods: {
    //上一页方法
    PrePage: function (event) {
        $(".pagination .active").prev().trigger("click");
    },
    //下一页方法
    NextPage: function (event) {
        $(".pagination .active").next().trigger("click");
    },
    //点击页码的方法
    NumPage: function (num, event) {
        if (this.curpage == num) {
            return;
        }
        this.curpage = num;
        $(".pagination li").removeClass("active");
        if (event.target.tagName.toUpperCase() == "LI") {
            $(event.target).addClass("active");
        }
        else {
            $(event.target).parent().addClass("active");
        }
        if (this.curpage == 1) {
            $("#prepage").addClass("disabled");
        }
        else {
            $("#prepage").removeClass("disabled");
        }
        if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
            $("#nextpage").addClass("disabled");
        }
        else {
            $("#nextpage").removeClass("disabled");
        }
    }
},
</script>