HTML 클래스 바인딩

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

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

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

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

• 객체에 더 많은 필드를 사용하여 여러 클래스를 토글 가능
• 렌더링 결과는 아래와 같이 나온다.

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

배열로 바인딩 하기

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

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

• 렌더링 결과는 아래와 같이 나온다.

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

컴포넌트에서 사용하기

<!-- 자식 컴포넌트의 템플릿 -->
<p class="foo bar">안녕!</p>

<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />

• 렌더링 결과는 아래처럼.

<p class="foo bar baz boo">안녕!</p>

---

인라인 스타일 바인딩

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

<div :style="styleObject"></div>

• :style 디렉티브는 :class와 마찬가지로 일반 스타일 속성과 함께 사용할 수 있다.
• :class 쓰듯이 쓰면 되는 것 같다.

접두사 자동완성

• Vue가 실행되고 있을 때, 해당 브라우저에서 지원되지 않는 CSS 속성이 :style에 사용되면, 자동으로 해당 속성과 벤더 접두사가 조합된 여러 개의 특수한 속성을 테스트하고 지원되는 속성을 찾아서 추가한다.

---

공식 메뉴얼: https://ko.vuejs.org/guide/essentials/class-and-style.html