클래스와 스타일 바인딩 | Vue.js

엘리먼트에 데이터를 바인딩하는 이유

→ 클래스 목록과 해당 인라인 스타일을 조작하기 위함이다.

• 연결된 문자열을 사용하여 값을 생성하려고 하면 오류가 발생하기 쉽다.
  • 따라서, Vue는 v-bind 가 class 및 style 과 함께 사용될 때 특별한 향상을 제공한다.

HTML 클래스 바인딩

객체로 바인딩 하기

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

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

• isActive 데이터 속성의 truthiness에 의해 active 클래스의 존재 여부가 결정된다.

• 객체에 더 많은 필드를 사용해서 여러 클래스를 토글할 수 있다.

  • 또한, :class 디렉티브는 일반 class 속성과 공존할 수도 있다.

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

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

→ 위와 같은 상황이 주어지면, 다음과 같이 렌더링 된다.