分页 一般都是调接口， 接口为这种格式

{code: 0, msg: "success",…}code:0data:{content:[{content: "11", time: "22", },…] //数据列表nextPage:1  //上一页number:0　　//第几页numberOfElements:10prevPage:1  //下一页size:10    //页数totalElements:257totalPages:26  //总页数}msg:"success"

/** * 分页 * @privat * 全局用的分页组件 */var _pageTemplate='' +    '
     
      ' +    '    
      
       ' +    '        
       
上一页
' +    '        
       
上一页
' +    '        
       
' +    '            {
   { index }}' +    '        
' +    '        
       
下一页
' +    '        
       
下一页
' +    '        
       
共{
   {pages}}页
' +    '        
       
跳转到第
' +    '        
       
' +    '        
       
页
'+    '        
       
确定
'+    '    
      
' +    '
     
';Vue.component('vue-page',{    template:_pageTemplate,    props:["page_number","pages","jump"], //接收参数    data:function(){        return{           pageNow:this.page_number,           inputNumber:"",           num:this.page_number,        }    },    //监听事件    // watch: {
        //     cur: function(oldValue , newValue){
        //         console.log(arguments);    //     }    // },    //方法处理    methods: {        checkNumber:function () {            var that =this;            var reg = /[^0-9.]/g; //正则检验是否数字                if (reg.test(that.inputNumber)) {                    that.inputNumber="";                }            },        pageClick:function(e){            e=Number(e);            if(e>this.pages){                e=this.pages;                this.inputNumber=this.pages;            }            if(e != this.page_number||e==this.num){                this.pageNow =e;            }            this.jump(e)        }    },    //计算属性    computed: {        indexs: function(){            var left = 1;            var right = this.pages;            var ar = [];            if(this.pages>= 5){                if(this.pageNow > 3 && this.pageNow < this.pages-2){                    left = this.pageNow - 2;                    right = this.pageNow + 2                }else{                    if(this.pageNow<=3){                        left = 1;                        right = 5                    }else{                        right = this.pages;                        left = this.pages -4                    }                }            }            while (left <= right){                ar.push(left);                left ++            }            return ar        }    }});

这是封装得组件

data：{         //分页            page:1,//第几页            pages: 10, //总页数            pagesize: 10,//分页数量       }     调用ajax 渲染数据

Journal:function (index) {
       var that =this;     that.page=index;     Comm.runebws("url",{
   　　　　　　　　　　count:that.pagesize, //预定好跟接口 　　　　　　　　　　page:that.page      //预定好跟接口

},"GET",function (result) {
           if(result.code==0){
               that.Journals=result.data.content;             that.pages=result.data.totalPages;         }     }) }

前端html代码

     
       
      
       
        {
   {item.time}}
       
      
       
      
       
        {
   {item.ip}}
       
      
       
      
       
        {
   {item.content}}
       
      
 
     

.page-bar{}ul,li{
       margin: 0px;    padding: 0px;}li{
       list-style: none}.page-bar li:first-child>a {
       margin-left: 0px}.page-bar a{
       border: 1px solid #6062A3;    text-decoration: none;    position: relative;    float: left;    padding: 6px 12px;    margin-left: -1px;    line-height: 1.42857143;    color: #337ab7;    cursor: pointer}.page-bar a:hover{    /*background-color: #eee;*/}.page-bar a.banclick{
       cursor:not-allowed;}.page-bar .active a{
       color: #fff;    cursor: default;    background-color: #337ab7;    border-color: #337ab7;}.page-bar i{
       font-style:normal;    color: #d44950;    margin: 0px 4px;    font-size: 12px;}