场景:在tab切换过程中每一个激活状态的按钮背景颜色不一样
如图:1.
2.
3.
代码实现:主要注意动态class的写法
<div class="tab_box flex_dom flex_item_around flex_item_mid">
<span
v-for="(item,index) in switchMapTab"
:key="index"
:class="[{activeTab0:chooseIndexSwitchMap === 0&&chooseIndexSwitchMap === index},{activeTab1:chooseIndexSwitchMap === 1&&chooseIndexSwitchMap === index},{activeTab2:chooseIndexSwitchMap === 2&&chooseIndexSwitchMap === index},{activeTab3:chooseIndexSwitchMap === 3&&chooseIndexSwitchMap === index},{activeTab4:chooseIndexSwitchMap === 4&&chooseIndexSwitchMap === index}]"
@click="chooseItMap(index)"
><span
class="squareType"
:class="'square'+index"
></span>{{item}}</span>
</div>
样式:
.tab_box {
width: 1200px;
height: 180px;
margin: 0 auto;
> span {
display: inline-block;
min-width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ffffff;
box-shadow: 0px 4px 8px 0px rgba(236, 91, 44, 0.2);
border-radius: 35px;
font-size: 14px;
font-weight: bold;
color: #333333;
box-sizing: border-box;
padding: 0 20px 0 20px;
cursor: pointer;
.squareType {
display: inline-block;
width: 20px;
height: 20px;
background: #b392e9;
border-radius: 4px;
border: 1px solid #ffffff;
margin-right: 10px;
vertical-align: middle;
}
.square0 {
background: #b392e9;
}
.square1 {
background: #5cbeff;
}
.square2 {
background: #97dd72;
}
.square3 {
background: #ffa55f;
}
.square4 {
background: #ff7d69;
}
}
.activeTab0 {
background: #b392e9;
color: #fff;
}
.activeTab1 {
background: #5cbeff;
color: #fff;
}
.activeTab2 {
background: #97dd72;
color: #fff;
}
.activeTab3 {
background: #ffa55f;
color: #fff;
}
.activeTab4 {
background: #ff7d69;
color: #fff;
}
}