Vue.js 클래스와 스타일 바인딩되기

 

데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해
일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다.
우리는 표현식으로 최종 문자열을 계산하면 됩니다.
그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다.

이러한 이류로  Vue는 class와 style에 v-bind를 사용할 때 
특별히 향상된 기능을 제공합니다. 
표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다.

 

HTML 클래스 바인딩하기

 

#객체구문

클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다.

HTML부분
<div v-bind:class="{ active: isActive }"></div>

위 구문은 active클래스의 존재 여부가 데이터 속성 isActive의 참 속성에 
의해 결정되는 것을 의미합니다.

객체에 필드가 더 있으면 여러 클래스를 토글할 수 있습니다. 
또한 v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있습니다.
그래서 다음과 같은 템플릿이 가능합니다.

HTML부분
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

그리고 데이터는 
JS부분
data: {
    isActive: true, 
    hasError: false
}

아래와 같이 렌더링 됩니다.

<div class="static active"></div>

isActive 또는 hasError가 변경되면 클래스 목록도 그에 따라 업데이트됩니다.
예를 들어, hasError가 true가 되면 클래스 목록은 "static active text-danger"가 됩니다.

바인딩 된 객체는 인라인 일 필요는 없습니다.
<div v-bind:class="classObject"></div>

JS부분
data:{
    classObject:{
        active: true, 
        'text-danger': false
    }
}

같은 결과로 렌더링 됩니다. 또한 객체를 반환하는 계산된 속성에도 바인딩 할 수 있습니다.
이것은 일반적이며 강력한 패턴입니다. 

HTML부분
<div v-bind:class="classObject"></div>

JS부분
data:{
    isActive: true,
    error: null
},
compted:{
    classObject: function(){
        return{
            active: this.isActive && !this.error, 
            'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}