Vue.js 简单分页

  <div class="page" v-show="show">
                    <div class="pagelist">
                        <span class="jump" :class="{disabled:pstart}" @click="{current_page--};prePage(current_page)">上一页</span>
                        <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                        <span class="ellipsis" v-show="efont">...</span>
                        <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
                              @click="jumpPage(num)">{{num}}</span>
                        <span class="ellipsis" v-show="ebehind">...</span>

                        <span :class="{disabled:pend}" class="jump" @click="{current_page--};prePage(current_page)"">下一页</span>
                        <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>

                        <span class="jumppoint">跳转到:</span>
                        <span class="jumpinp"><input type="text" v-model="changePage"></span>
                        <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
                        <br>
                        <br>
                    </div>
                </div>
unction getVue(r, s) {
        if (v) {
            v.$set(v.$data, "result", r);
            v.$set(v.$data, "news", r.resultObj.content);
        } else {
            v = new Vue({
                el: "#news",
                data: {
                    //数据赋值操作
                    result: r,
                    news: r.resultObj.content,
                    current_page: r.resultObj.number + 1, //当前页
                    pages: r.resultObj.totalPages, //总页数
                    changePage: '',//跳转页
                    nowIndex: 0
                },
                computed: {
                    show: function () {
                        return this.pages && this.pages != 1
                    },
                    pstart: function () {
                        return this.current_page == 1;
                    },
                    pend: function () {
                        return this.current_page == this.pages;
                    },
                    efont: function () {
                        if (this.pages <= 7) return false;
                        return this.current_page > 5
                    },
                    ebehind: function () {
                        if (this.pages <= 7) return false;
                        var nowAy = this.indexs;
                        return nowAy[nowAy.length - 1] != this.pages;
                    },
                    indexs: function () {

                        var left = 1,
                                right = this.pages,
                                ar = [];
                        if (this.pages >= 7) {
                            if (this.current_page > 5 && this.current_page < this.pages - 4) {
                                left = Number(this.current_page) - 3;
                                right = Number(this.current_page) + 3;
                            } else {
                                if (this.current_page <= 5) {
                                    left = 1;
                                    right = 7;
                                } else {
                                    right = this.pages;

                                    left = this.pages - 6;
                                }
                            }
                        }
                        while (left <= right) {
                            ar.push(left);
                            left++;
                        }
                        return ar;
                    },
                },
                methods: {
                    jumpPage: function (id) {
                        this.current_page = id;
                        findData(id - 1, size)
                    },
                    //上一页    page  就是当前页数
                    prePage(page){
                        // alert(id-1);
                        findData(page - 1, size)
                    },
                    //下一页     page  就是当前页数
                    nextPage(id){
                        findData(page - 1, size)
                    }
 }
    }

猜你喜欢

转载自blog.csdn.net/qq_37668945/article/details/88070610