Vue.js 用于 绑定分页

一、css

/* *****分页***** */
.paging{
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: right;
}
.paging label{
    display: inline-block;
    width: auto;
    height: 100px;
    line-height: 100px;
    font-size: 14px;
    color: #333;
    margin: 0px 20px;
}
.paging label input{
    display: inline-block;
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    padding: 0px 5px;
    box-sizing: border-box;
    margin: 0px 10px;
    text-align: center;
}
.paging a{
    display: inline-block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    padding: 0px 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}
.paging ul{
    display: inline-block;
    width: auto;
    height: 30px;
}
.paging ul li{
    display: inline-block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    padding: 0px 10px;
    box-sizing: border-box;
}
.paging ul li a{
    display: inline-block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    padding: 0px 10px;
    box-sizing: border-box;
}
.paging ul li a:hover,.paging ul li .active{
    background: #1aa6bd;
    color: #fff;
}
/* *****分页***** */

 

二、html

                 <%--分页--%>
                    <div class="paging">
                        <label>共{{notePage.totalCount}}条</label>
                        <a href="javascript:;" data-sign="prev" @click="pageclik($event)">上一页</a>
                        <ul>
                            <li v-for="page in notePage.totalPage" >
                                <a href="javascript:;" data-sign="page" @click="pageclik($event)" :class="['',{'active':page==1}]">{{page}}</a>
                            </li>
                        </ul>
                        <a href="javascript:;" data-sign="next" @click="pageclik($event)" >下一页</a>
                        <label>前往<input type="text"  data-sign="numPage" @keyup.13="pageclik($event)"  />页</label>
                    </div>
                    <%--分页--%>

 

三、js

 var app= new Vue({
            el:'#app',
            data:{
                notePage:{
                    totalCount:0,
                    totalPage:1
                }
            },
            methods:{
                  pageclik: function (event) {
                    var _this = $(event.currentTarget);
                    var  dataSign = _this.attr("data-sign");
                    var nowPage = 1;
                    var noeTag = $(".paging .active")
                    if(dataSign == 'next'){
                        //下一页
                        nowPage = noeTag.text();
                        if(nowPage < this.notePage.totalPage){
                            nowPage = parseInt(nowPage)+1;
                            noeTag.removeClass('active');
                            noeTag.parents('li').next("li").find("a").addClass('active');
                        }
                    }else if(dataSign == 'prev'){
                        //上一页
                        nowPage = noeTag.text();
                        if(nowPage >1){
                            nowPage = parseInt(nowPage)-1;
                            noeTag.removeClass('active');
                            noeTag.parents('li').prev("li").find("a").addClass('active');
                        }
                    }else if(dataSign == 'page'){
                        //点击数字
                        nowPage = _this.text();
                        noeTag.removeClass('active');
                        _this.addClass('active');
                    }else  if(dataSign == 'numPage'){
                        nowPage = _this.val();
                        noeTag.removeClass('active');
                        if(!risun.Utils.checkNumber(nowPage)){
                           nowPage = 1
                        } else if(nowPage < 1){
                            //输入的值>总页数
                            nowPage = 1;
                        }else if(nowPage > this.notePage.totalPage){
                            nowPage = this.notePage.totalPage;
                        }
                        _this.val(nowPage);
                        $(".paging  a").each(function () {
                            var thisNum = parseInt($(this).text());
                            if(thisNum == nowPage)
                                $(this).addClass('active');
                        })
                    }
                    loadData(nowPage) //调用数据
                }
            }

})