[VueJS] 값에 따라 class 적용하기 (ft. v-bind:class , v-bind class multiple)

vueJS에서 클래스 바인딩을 하는 방법에 대해 알아보자.

 

vue를 사용하기 이전에는 스크립트로 특정 태그를 가져와 조건에 따라 클래스를 추가하고 제거하는 과정을 했다면,

vueJS를 사용하게 되면 그 일련의 과정들이 매우 간결해진다.

 

일단 기본적인 구문은 아래와 같다.

 

▷ 구문

v-bind:class = {적용될 클래스명 : true/false 조건식}

 

이제 예제 코드를 통해 접해보자.

---

▷ 예제1) 데이터 값으로 클래스 적용하기

<div id='app'>
 <a :class="{active : isActive}"></a>
</div>

new Vue({
    el: '#app',
    data: {
        isActive : true
    },
});

 

이런식으로 true/false가 될 조건식을 데이터를 기준으로 클래스 적용이 가능하다.

굳이 boolean값이 아니더라도 true/false를 만들어낼 수 있는 조건이라면 아무거나 상관없다.

 

▷ 예제2) 메서드를 통해 클래스 적용하기

<div id='app'>
 <a :class="{active : getActive()}"></a>
</div>

new Vue({
    el: '#app',
    data: {},
    methods : {
        getActive : function(){
            return true;
        }
    }
});

 

이는 데이터만을 기준으로 true/false하는것보다 좀 더 다양한 조건식이 있다면 사용하는 방법이다.

메서드와 연결해서 true/false값을 리턴받아 클래스를 결정한다.

 

▷ 예제3) 여러 클래스를 동시에 바인딩 하기 (v-bind:class multiple)

<div id='app'>
 <a v-bind:class="[{active : getActive()}, {mine : isMine}]"></a>
</div>

이런식으로 클래스 별로 조건과 같이 배열안에 넣어서 사용한다.

 

추가적으로 잘못된 사용 방법에 대해 말하자면 아래와 같다.

<a 
    v-bind:class="{active : getActive()}" 
    v-bind:class="{mine : isMine}"
></a>