Vue- 조건에 따라 클래스 적용하기

 

#단일 조건부 클래스 

  :class="{'클래스명': '조건'}"

<div :class="{'user_box': user == true }">

 

 

#복수 조건부 클래스

  :class="{'클래스명': '조건', '클래스명': '조건'}"

<div :class="{'user_box': user == true, 'dark_mode': darkMode == true }">

 

 

# 삼항 연산자를 이용한 조건부 클래스

  :class="[조건 ? '조건이 true일 경우의 클래스' : '조건이 false일 경우의 클래스']"

<div :class="[mode === 'light' ? 'light_mode': 'dark_mode']">

 

 

# 조건이 많아서 인라인으로 사용하기 불편할 경우엔 이런 방법도...

<template>
	<div class="level-box" :class="level_status">
		{{ user.level }}
	</div>
</template>

<script>
	computed:{
    	level_status() {
            return {
                'level-pm': this.invitor?.level == UserLevel.PM,
                'level-pl': this.invitor?.level == UserLevel.PL,
                'level-fe': this.invitor?.level == UserLevel.FE,
                'level-vi': [UserLevel.PM, UserLevel.PL, UserLevel.FE].includes(this.invitor?.level) == false
            }
        },
    }
</script>

<style>
.level-box {
    width: 4em;
    text-align: center;
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    color: #ffffff;
    font-size: small;
}
.level-box.level-pm {
    background-color: #1976d2;
}
.level-box.level-pl {
    background-color: #388e3c;
}
.level-box.level-fe {
    background-color: #7b1fa2;
}
.level-box.level-vi {
    background-color: #fbc02d;;
}
</style>