일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 스타일을 동적으로 만들기 위해서다.
하지만 class와 style을 v-bind를 사용하여 할당하게되는 경우 성가시고 오류가 발생하기 쉽다.

HTML 클래스 바인딩

객체로 바인딩

클래스를 동적으로 표현하기위해 아래와 같이 바인딩을 한다.

<template>
  <div
      class="static"
      :class="{ active: isActive, 'text-danger': hasError }"
  >HTML Class binding test!!</div>
</template>
<script setup>
const isActive = ref(true)
const hasError = ref(false)
</script>

요소에서 div를 확인 해보면 아래와 같다

바인딩되는 객체는 inline일 필요가 없다.

<template>
  <div :class="classObject">HTML Class binding test(no inline)!!</div>
</template>
<script setup>
const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

위와같이 해도 inline으로 한것과 동일하다.

이전시간에 배운 computed로도 바인딩할 수 있다.

<template>
  <div :class="classObject2">HTML Class binding test(computed)!!</div>
</template>
<script setup>
const isActive = ref(true)
const hasError = ref(false)
const classObject2 = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))
</script>

배열로 바인딩

<template>
  <div :class="[isActive, hasError]">Array Binding!!</div>
</template>
<script setup>
const isActive = ref(true)
const hasError = ref(false)
</script>

삼항 표현식이나 배열내에 객체구문을 넣는것 또한 사용 가능하다.

<template>
  <div :class="[isActive ? activeClass : '', errorClass]"></div>
  <div :class="[{ active: isActive }, errorClass]"></div>
</template>