当你看到这篇文章的时候,我已经假设你对VUE有了一定的了解!
上源码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
ul,li{margin: 0px;padding: 0px;list-style: none;}
.pager{margin:10px;}
.pager li:first-child>a {margin-left: 0px;}
.pager a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;cursor: pointer;
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
user-select:none;
}
.pager a:hover{background-color: #eee;}
.pager a.banclick{cursor:not-allowed;}
.pager .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
.pager i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
</style>
</head>
<body>
<div class="pager">
<ul>
<li v-if="current>1"><a v-on:click="current--,pageClick()">上一页</a></li>
<li v-if="current==1"><a class="banclick">上一页</a></li>
<li v-for="index in indexs" v-bind:class="{ 'active': current == index}">
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="current!=allpage"><a v-on:click="current++,pageClick()">下一页</a></li>
<li v-if="current == allpage"><a class="banclick">下一页</a></li>
<li><a>共<i>{{allpage}}</i>页</a></li>
</ul>
</div>
<script type="text/javascript">
var pageBar = new Vue({
el: '.pager',
data: {
allpage: 20, //总页数
current: 1 //当前页码
},
watch: {
current: function(oldValue , newValue){
console.log(arguments);//打印节点信息
}
},
methods: {
btnClick: function(data){//页码点击事件
if(data != this.current){
this.current = data //重写,点哪个选中哪个
}
},
pageClick: function(){
console.log('现在在'+this.current+'页');//打印当前是第几页
}
},
computed: {
indexs: function(){
var left = 1;//设定左为1
var right = this.allpage;//右为全部页数
var array = [];//定义一个数组,用来循环输出
if(this.allpage>= 5){//如果页数大于等于5的时候,保证中间显示5个
if(this.current > 3 && this.current < this.allpage-2){//大于5个的情况
left = this.current - 2 //左边-2
right = this.current + 2 //右边+2
}else{
if(this.current<=3){//等于5个的情况
left = 1
right = 5
}else{//中间已经不够显示5个的情况
right = this.allpage
left = this.allpage -4
}
}
}
while (left <= right){//循环出数组
array.push(left)
left ++
}
return array //返回数组
}
}
})
</script>
</body>
</html>
自己看吧,都有注释,看不明白,留评论!