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;
  }

實現效果