vue动态修改class属性的几种方式

1.使用 :class 给元素添加动态值

例如一个title或者buttton的显示。不同状态有3个颜色

<i class="el-icon-caret-top " :class="addClass(value)"></i>


methods:{
   addClass(val){
       if(val> '0%'){
         return 'class1'
       }else if ( val < '0%'){
         return 'class2'
       }
       else {
         return  'class3'
       }  
    },
}

    <style lang="less">
        .class1 {
          color: red;
        }
        .class2 {
          color: blue;
          transform: rotate(180deg);
        }
        .class3  {
            color: rgb(0, 255, 115);
            transform: rotate(90deg); 
        }

    </style>
    

2.使用 v-if 展示不同的class

    <span class="class1"  v-if="value>0"> {{value}}</span>
    <span class="class2"  v-if="valu==0"> {{value}}</span>
    <span class="class3"  v-if="value<0"> {{value}}</span>
    
      <style lang="less">
        .class1 {
          color: red;
        }
        .class2 {
          color: blue;
        
        }
        .class3  {
            color: green;
        }

    </style>

3. 使用三元运算符

 <span :class="value>0?'class1':(value ==0 ?'class2':'class3')" > {{value}}</span>

4.如果只是2个class单独切换

// 可以是 默认写好class1
    <i class="el-icon-caret-top  class1" :class="class2=isAddClass"></i>

  -----------------------
    export default {
      data() {
        return {
        isAddClass:true,//  true为添加class2 ，false为不添加只有class1
    }
    
    -------------------------
    
   <style lang="less">
        .class1 {
          color: red;
        }
        .class1.class2 {
          color: blue;
          transform: rotate(180deg);
        }

    </style>