<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
li{
list-style: none;
display: inline-block;
}
span{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid indianred;
line-height: 30px;
text-align: center;
}
span:hover{
background-color: #DDDDDD;
cursor: pointer;
}
[v-cloak] {
display: none;
}
.active{
background-color: deepskyblue;
color: #FFFFFF;
}
</style>
<body>
<div id="page">
<ul >
<li v-show="current!=1" @click="current--"><span><<</span></li>
<li v-for="index in pages" @click="current=index" :class="{'active':current==index}"><span v-cloak>{{index}}</span></li>
<li v-show="current!=total && total!=0" @click="current++"><span>>></span></li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:'#page',
data:{
current:1, //当前页
total:12, //总页数
showItem:5 //最多展示的页码数
},
computed:{
pages(){
var page=[];//显示页码
//思想：用当前激活页面驱动页面显示的分别
if(this.current<this.showItem){//当前页小于最大页码数（showItem），区分总页数是否达到最大页码数
//获取总页数和最大页码数较小的值
var i=Math.min(this.total,this.showItem);
while(i){
//通过page的数组值显示页码
page.unshift(i--);
}
}else{//当前页面大于最大页码数（showItem）时，区分显示的页码规则
var pagestart=this.current-Math.floor(this.showItem/2);//获取显示的页码第一位页码（默认当前页居中）
var i=this.showItem;//用来显示多少（i）个页码
if(pagestart>(this.total-this.showItem)){//第一个页码如果大于总页数减去展示的页码数，则当前页不能居中
pagestart=(this.total-this.showItem)+1;//应该显示的第一个页码数
}
while(i--){
//通过page的数组值显示页码
page.push(pagestart++);
}
}
return page;
}
}
})
</script>
</html>
效果图如下：
