[vue3]클래스와 스타일 바인딩

일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 해당 인라인 스타일을 조작하기 위함임.
class, style 둘다 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 문자열 값을 동적으로 할당 할 수 있음.
그러나 연결된 문자열을 사용하여 이러한 값을 생성하려고 하면 성가시고 오류가 발생하기 쉬움.
이러한 이유로 Vue는 v-bind가 class 및 style과 함께 사용될 때 특별한 향상을 제공함.
문자열 외에도 현식은 객체 또는 배열도 올 수 있음.

HTML 클래스 바인딩

객체로 바인딩 하기

클래스를 동적으로 토글하기 위해 객체를 :class (v-bind:class의 줄임말)에 전달 할 수 있음.

<div :class="{active: isActive}"></div>

위 구문의 isActive 데이터 속성의 true에 의해 active 클래스의 존재 여부가 결정됨.

객체에 더 많은 필드를 사용하여 여러 클래스를 토글할 수 있음.
또한 :class 디렉티브는 일반 class 속성과 공존 할 수도 있음.

const isActive = ref(true)
const hasError = ref(false)

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

는 다음과 같이 렌더링 됨.

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

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

바인딩된 객체는 인라인일 필요가 없음

const classObject = reative({
  active: true,
  'text-danger': false
})

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

이렇게 하면 동일한 결과가 렌더링 됨.
객체를 반환하는 computed로 반잉딩 할 수도 있음.

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

배열로 바인딩 하기

:calss를 배열로 바인딩하여 클래스 목록을 적용할 수 있음.

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div :class="[activeClass, errorClass]"></div>

다음과 같이 렌더링 됨.

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

삼항 표현식도 가능