vue class动态类名

 1. 三元表达式

//1. html
<view :class="`stage-${item.state == '通过' ? 'pass' : 'nopass'}`"></view>

//2.style
.stage-pass {
    background: green;
}
.stage-nopass {
    background: red;
}

2. 对象的形式：可以写多个，用逗号分开（常用）。

<div class="steps-list-cont" :class="{ stage: item.label == '缴纳成功', 'stage-pass': true  }"> </div>

3.传方法，在方法中返回类名，这个方法是可以触发的哦~，或者通过计算属性也是妥妥滴

// 使用方法 
<view :class="queryBoxClassNames()"></view>

methods: {
    // 动态获取类名
    queryBoxClassNames() {
        const classNames = {
            JMJS: ['fixed-top', 'fixed-right']
        }
        return classNames[this.type] || ['fixed-bottom', 'fixed-left'];
    },
}

-----------------------------------------------------------------------------

// 使用计算属性
<view :class="queryBoxClassNames"></view>

computed: {
    // 动态获取类名
	queryBoxClassNames() {
        const classNames = {
            JMJS: ['fixed-top', 'fixed-right']
        }
        return classNames[this.type] || ['fixed-bottom', 'fixed-left'];
    },

相当于

<view v-if="fType !== 'JMJS'" class="fixed-bottom fixed-left"></view>
<view v-if="fType == 'JMJS'" class="fixed-top fixed-right"></view>

4.根据计算属性判断添加类名，该写法多用于被封装的组件库内

 <template>
  <transition name="mint-toast-pop">
    <div class="mint-toast" v-show="visible" :class="customClass" :style="{ 'padding': iconClass === '' ? '10px' : '20px' }"></div>
  </transition>
</template>


computed: {
      customClass() {
        var classes = [];
        switch (this.position) {
          case 'top':
            classes.push('is-placetop');
            break;
          case 'bottom':
            classes.push('is-placebottom');
            break;
          default:
            classes.push('is-placemiddle');
        }
        classes.push(this.className);

        return classes.join(' ');
      }
    }