VUE3 class 用法

第一种class绑定 字符串类型

<div class="text">第一种class绑定 字符串类型</div>

第二种class绑定 对象形式

html

<!-- <div class="text" :class="{类名: 布尔值}">第二种class绑定 对象形式</div> -->
    <div class="text" :class="{active: isActive, 'text-bg': !isActive}">第二种class绑定 对象形式</div>
    <button @click="isActive = !isActive">点击取反</button>

js

export default{
    
    
	data(){
    
    
	    return{
    
    
	        isActive:true,
	    }
	  },
 }

css

.active{
    
    
    height: 30px;
    background: #42b883aa;
}
.text-bg{
    
    
    height: 30px;
    background: #f10202aa;
}

第三种class绑定值 放到data中

<div class="text" :class="objClass">第三种class绑定 放到data中</div>

data(){
    
    
    return{
    
    
        objClass:{
    
    active: true, 'text-bg': false}
    }
  },

第四种class绑定值 放到计算属性computed中

<div class="text" :class="Classobj">第四种class绑定值 放到计算属性computed中</div>

export default{
    
    
  data(){
    
    
    return{
    
    
        isActive:true,
        error:null,
    }
  },
  computed:{
    
    
    Classobj:function(){
    
    
        return {
    
    
            active:this.isActive && !this.error,
            'text-bg':this.error
        }
    }
  }
}

第五种class绑定值 用数组

<div class="text" :class="[error,color]">第五种class绑定值 用数组</div>

data(){
    
    
    return{
    
    
        error:'text-bg',
        color: 'text'
    }
  },

.text{
    
    
    color: aqua;
}
.text-bg{
    
    
    height: 30px;
    background: #f10202aa;
}

第六种class绑定值 用数组加对象

<div class="text" :class="[error,{color:show}]">第六种class绑定值 用数组加对象</div>

data(){
    
    
    return{
    
    
        show:true,
        error:'text-bg',
        color: 'text'
    }
  },

<style scoped>

.text{
    
    
    color: aqua;
}
.text-bg{
    
    
    height: 30px;
    background: #f10202aa;
}
</style>