vue翻页（示例）

1、html代码

　　　　　　　　　　　　　　　　　　　　　　<div class="page_number" id="app">
                                        <ul>
                                            <li class="grey_border last_page">
                                                <a href="javascript::" :class="{disabled:pstart}" @click="upPage()"> 
                                                    上一页
                                                </a>
                                            </li>
                                            <li v-show="efont">
                                                <a href="javascript::"> 
                                                    ...
                                                </a>
                                            </li>
                                            <li v-for="num in indexs" :class="{page_num_point:current_page==num}" >
                                                <a  href="javascript::" @click="numbersPage(num)"> 
                                                    <span>{{num}}</span>
                                                </a>
                                            </li>
                                            <li v-show="ebehind">
                                                <a href="javascript::"> 
                                                    ...
                                                </a>
                                            </li>
                                            <li class="last_page" :class="{disabled:pend}" @click="nextPage()">
                                                <a href="javascript::" >下一页 
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

2、javascript脚本代码

function vuePages(totalPages, pageNumbers) {
    var newlist = new Vue({
        el: '#app',
        data: {
            current_page: pageNumbers, //当前页
            pages: 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;
            },
            nextPage: function(obj) {
                var pageIndex = getQueryStringL("pageIndex");
                var type = getQueryStringL("type");
                var keywords = getQueryStringL("keywords");
                var searchTime = getQueryStringL("searchTime");
                var province = getQueryStringL("province");
                pageIndex = parseInt(pageIndex) + 1;
                if (pageNumbers < totalPages) {
                    var url = "/information/listPage?type=" + type + "&pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&keywords=" + keywords + "&searchTime=" + searchTime + "&province=" + province;
                    window.location.href = url;
                }
            }, upPage: function() {
                var pageIndex = getQueryStringL("pageIndex");
                var type = getQueryStringL("type");
                var keywords = getQueryStringL("keywords");
                var searchTime = getQueryStringL("searchTime");
                var province = getQueryStringL("province");
                pageIndex = parseInt(pageIndex) - 1;
                if (pageIndex > 0) {
                    var url = "/information/listPage?type=" + type + "&pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&keywords=" + keywords + "&searchTime=" + searchTime + "&province=" + province;
                    window.location.href = url;
                }
            },
            numbersPage: function(id) {
                var type = getQueryStringL("type");
                var keywords = getQueryStringL("keywords");
                var searchTime = getQueryStringL("searchTime");
                var province = getQueryStringL("province");
                var url = "/information/listPage?type=" + type + "&pageIndex=" + id + "&pageSize=" + pageSize + "&keywords=" + keywords + "&searchTime=" + searchTime + "&province=" + province;
                window.location.href = url;
            },
            numbersPageLast: function() {
                var type = getQueryStringL("type");
                var keywords = getQueryStringL("keywords");
                var searchTime = getQueryStringL("searchTime");
                var province = getQueryStringL("province");
                var url = "/information/listPage?type=" + type + "&pageIndex=" + pageNumbers + "&pageSize=" + pageSize + "&keywords=" + keywords + "&searchTime=" + searchTime + "&province=" + province;
                window.location.href = url;

            },
        },
    })
    $("#app").show();
}

//获取地址栏参数的方法
function getQueryStringL(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
//        return unescape(r[2]);
        return decodeURI(r[2]);
    }
    return "";
}

 

3、效果展示

注意：class需要另外加，还需要引入vue脚本文件，请求路径及参数都需要修改