[vue] class(클래스) 조건에 따라 바인딩하는 방법(if, ifelse에 따른 class 변경)

vue 조건에 따라 class 변경하기

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다.

이럴 경우 주로 Class를 변경시켜서 적용이 가능하다.

Vue에서 클래스를 조건에따라서 설정할 수 있다.

 

👩‍💻Vue 조건부 Class 예시 

만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자.

라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다.

이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자

<template>
    <div class="light body">
        <button class="thema-button" @click="changeThema">{{thema}}</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                thema: "dark"
            }
        },
        methods: {
            changeThema() {
                if (this.thema === 'light') {
                    this.thema = 'dark'
                } else {
                    this.thema = 'light'
                }
            }
        }
    }
</script>
<style>
    .body {
        width:100%;
        height:100vh;
        padding:30px;
    }
    .thema-button {
        width:100px;
        height:30px;
        font-size:14px;
        background:#ddd;
        border:0;
        box-shadow: 1px 2px 15px rgba(0,0,0,0.1);
    }
    .thema-button:focus {
        border:0;
        outline:0;
    }
    .dark {
        background:#444;
    }
    .dark .thema-button {
        background:#666;
        color:#fff;
    }
    .light {
        background:#fff;
    }
</style>

thema를 변경을 위한 예시

div class중 body를 가지고 있는 div를  thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자.

 

1️⃣vue Class if 조건에 따라 바꿔주기

vue에서 조건에 따른 클래스를 넣어주는 방식은 아래와 같다.

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

<template>
    <div :class="{'light body': thema === 'light' }">
        <button class="thema-button" @click="changeThema">{{thema}}</button>
    </div>
</template>

vue 클래스 조건에 따라 변하는 모습

 

위의 방식처럼 :class 안에 {'클래스명' : 조건}을 통해서 class를 data에 변화에 따라서 변경되도록 만들어줬다.

만약 조건이 여러개가 있다고 하면 두 가지 조건을 주는 것도 가능하다.

 

2️⃣두 가지 이상 조건에 따른 Vue Class명 변경하기

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

<div :class="{'light': thema === 'light', 'dark': thema === 'dark', 'body' : true  }">
   <button class="thema-button" @click="changeThema">{{thema}}</button>
</div>

이처럼 body는 thema값과 상관없이 늘 보여줘야 된다고 하면  body에는 조건을 아예 ture로 설정해주었고

light와 dark는 각 thema 값에 따라서class를 보여주도록 설정했다.

vue 조건에 따라서 class가 바뀌도록 조정함

 

3️⃣vue class if와 else에 따라 바꿔주기

위의 방식으로 해도 충분히 원하는 기능이 구현되지만, 

사실 위 코드는 light버전일 때는 light 클래스를 그리고 아닐 경우는 dark를 보여주면 되는 소스이다.

만약 이런식으로 if와 else관계의 class는 좀 더 간단하게 위의 코드를 바꿔볼 수 있다. 

:class="[조건? 'ture일 경우 class' : 'false일 경우 class']"

    <div :class="[thema === 'light'? 'light body': 'dark body']">
        <button class="thema-button" @click="changeThema">{{thema}}</button>
    </div>

이처럼 위의코드를 if else방식의 class조건으로 바꾸면 좀 더 간단하게 변경할 수 있다.

해당 코드로 변경해도 실제 구현은 동일하게 수행된다.