小技巧,大作用
效果图:
代码:(核心见内部注解)
<template>
<div class="page" v-if="showPage">
<div
class="number"
v-for="(item,index) in currentPages"
:key="index"
@click="appoint(item,index)"
//核心:绑定一个class属性,若isActive等于当前索引,则为其添加带有背景的样式
:class="[isActive==index?'addBgColor':'']"
>{{item}}</div>
<div class="ellipsis" v-if="show">...</div>
<div class="pre_next" @click="pre" v-if="show"><</div>
<div class="pre_next" @click="next" v-if="show">></div>
</div>
</template>
data() {
return {
currentPages: [],
headPage: 1,
newPage: 1,
show: true,
showPage: true,
//设置isActive的默认值为0,即第1页默认有背景色
isActive: 0
};
},
methods: {
getInitPages() {
//每次刷新页面时,将isActive 的值修改为0,这样就能保证v-for中带有背景样式的是第1个,而不是以前的元素
this.isActive = 0;
this.show = true;
this.showPage = true;
this.currentPages = [];
for (let i = 1; i <= this.totalPages; i++) {
this.currentPages.push(i);
if (i === 5) {
break;
}
}
if (this.totalPages <= 5) {
this.show = false;
}
if (this.totalPages == 1) {
this.showPage = false;
}
},