1、先写好不同的样式
.categoryZx {
flex: 1;
text-align: center;
background: #fd6f01;
height: 40px;
border-radius: 22px;
line-height: 40px;
color: #ffffff;
font-size: 18px;
}
.categoryFl {
flex: 1;
text-align: center;
font-size: 18px;
color: #ED9A18;
}
2、根据不同值绑定不同class
data() {
return {
zxStatus: true,
flStatus: false
};
}
<div :class="zxStatus===true?'categoryZx':'categoryFl'" @click="zxList()">综合榜</div>