思路:
通过 v-bind:class="true ? style1 : style2 "
配合三元表达式完成样式的切换
具体实现
//return设置控制的参数
//有多个需要样式切换的话需要使用数字来标识是再那一个位置
/*控制样式的显示隐藏*/
styelTrue:1,
/*具体的样式*/
ulStyle:"",
//数字不匹的情况下显示的样式
liL:"liL",
liC:"liC",
liR:"liR",
//点击改变样式的事件
<li type="warning" underline="true" @click="changeUp(1)"
v-bind:class="styelTrue == 1 ? ulStyle : liL"
style="padding: 20px 0px; font-size: 16px;cursor: pointer;display: inline-block">Windows专区
</li> 
//事件部分
changeUp(up) {
console.log(up)
switch (up) {
case 1:
this.styelTrue = 1;
this.ulStyle = "liStyle1";
break;
}
}
//具体样式部分
.liStyle1{
border-bottom:2px solid black;
color: black;
}
.liStyle2{
border-bottom:2px solid black;
color: black;
}
.liStyle3{
border-bottom:2px solid black;
color: black;
}
.liL{
color: gray;
}
.liL:hover{
border-bottom:2px solid black;
color: black;
}
.liC{
color: gray;
}
.liC:hover{
color: black;
border-bottom:2px solid black;
}
.liR{
color: gray;
}
.liR:hover{
border-bottom:2px solid black;
color: black;
}