클래스 하나만 적용하는 케이스
<div :class="{ active: isActive }"></div>
클래스 여러개 적용하는 케이스 1
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
data() {
return {
isActive: true,
hasError: false
}
}
// 렌더링 된 코드
<div class="static active"></div>
클래스 여러개 적용하는 케이스 2
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
// 렌더링 된 코드
<div class="active"></div>
클래스 여러개 적용하는 케이스 3
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
// 렌더링 된 코드
<div class="active text-danger"></div>
클래스 여러개 적용하며 부분적으로 조건 거는 케이스
// 방법 1
<div :class="[isActive ? activeClass : '', errorClass]"></div>
// 방법 2
<div :class="[{ active: isActive }, errorClass]"></div>
// 방법1과 2는 같다.
클래스 바인딩 뿐만 아니라 인라인 style 속성에 대한 바인딩도 동일하다.
클래스 여러개 적용하는 케이스 2가 제일 많이 쓰일거 같고, 다른 케이스들은 저런 방법이 있다는 것 정도 참고하면 좋을거 같다.