[VUE] 클래스 바인딩

뷰에서의 클래스 바인딩은 true일때만 적용 됨
일반 class와 변수를 바인딩 할 수 있는 :class로 나뉨

:class = "{ active: isActive, 'text-danger': hasError }" // 여러 클래스 바인딩

객체 바인딩

data() {
    return {
        classObject: {
            active: true,
            'text-danger': false
        }
    }
}

결과

<div :class = "classObject"></div> → <div class="active"></div >

배열 바인딩

data() {
    return {
     activeClass: 'active',
     errorClass: 'text-danger'
       }
    } 
    
<div :class = "[activeClass, errorClass]"> </div>

결과

<div class = "active text-danger"> </div>