vue 动态绑定class样式

目前在项目里用到的方法如下：

方法一：写成对象的形式

  <img   src="./img/probe.png" 
:class="{ operationIcon: true, active: highlightIcon == 'probe' ? true : false }"   title="探针"  @click="probe" />

//class中  
    .operationIcon {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      cursor: pointer;
      margin: 18px;
      &.active {    //一定要有&符号
        background: rgba(128, 128, 128, 0.5);
      }
    }

方法二：写成数组的形式

   <div :class="['leftPanel', isloaded ? 'flexible':'lock']" 
     ref="leftPanel" v-show="showleftPanel">

//class中
  .leftPanel {
    position: absolute;
    left: 0;
    top: 50px;
    height: 100%;
    background-color: #fff;
    border-radius: 0 4px 4px 0;
    padding-top: 50px;
    border-right: 1px solid #e6ebf5;
    &.flexible{   //记得符号
    width: fit-content;
    }
    &.lock{       //记得符号
    width: 204px;
    }
}