vue动态样式设置

思路：

通过 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>&emsp;

//事件部分
   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;
  }

实现效果