class 바인딩

클래스 바인딩

클래스 하나만 적용하는 케이스

<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가 제일 많이 쓰일거 같고, 다른 케이스들은 저런 방법이 있다는 것 정도 참고하면 좋을거 같다.