}
},
props:["currentpage","allpage"],
methods:{
clickFirst:function(){//点击第一页
this.$emit("getajaxlist",1);
},
clickCurrent:function(item){
this.$emit("getajaxlist",item);
},
clickLast:function(){//点击最后一页
this.$emit("getajaxlist",this.allpage);
},
clickPrev:function(){//点击上一页
if(this.currentpage-1<1){
return false;
}
this.$emit("getajaxlist",this.currentpage-1);
},
clickNext:function(){//点击下一页
if(this.currentpage+1>this.allpage){
return false;
}
this.$emit("getajaxlist",this.currentpage+1);
}
}
}
</script>
<style>
.DiReactPage{ height:30px; line-height:30px; text-align:center;}
.DiReactPage .DiReactPage-btn{ display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; border-radius:4px; background:#09F; cursor:pointer;}
.DiReactPage .DiReactPage-btn.disable{ background:#999;cursor:not-allowed;}
.DiReactPage .DiReactPage-page{ display:inline-block; height:30px; line-height:30px; margin:0 20px;}
.DiReactPage .DiReactPage-page span{display:inline-block; height:30px; line-height:30px; padding:0 5px; margin:0 5px; color:#000; cursor:pointer;}
.DiReactPage .DiReactPage-page span.active{ color:#09F; }
.DiReactPage .iReactPage-input{ width:100px; border:1px solid #666; border-radius:4px;height:30px; line-height:30px; }
</style>
效果测试：
4.跳页处理
这个我们获取输入框的值，直接调用，不过对输入的内容必须有一些判断限制：
加一个data:
使用位置：
5.显示总页数
这个是最简单的：
六.分页全部代码和测试
divuePage.vue:
<template>
<div class="DiReactPage">
<div class="DiReactPage-btn" v-on:click="clickFirst">第一页</div>
<div class="DiReactPage-btn" v-on:click="clickPrev" v-bind:class="{disable:currentpage==1}">上一页</div>
<div class="DiReactPage-page">
<span v-for="(item,index) in pages" v-bind:class="{active:currentpage==item}" v-on:click="clickCurrent(item)">{{item}}</span>
