Vue에서 클래스와 스타일을 동적으로 어떻게 바인딩하나요?

Question

Accepted Answer

Vue는 `:class`와 `:style`에 특수한 **객체 및 배열 문법**을 제공하여, 반응형 상태에 따라 클래스와 인라인 스타일을 조건부로 적용할 수 있습니다 — 클래스 문자열을 수동으로 만드는 것보다 깔끔합니다. ## :class의 객체 문법 — 조건으로 클래스 토글 ```vue ``` 각 키는 클래스 이름이고 각 값은 불리언 조건입니다 — 값이 truthy일 때만 클래스가 나타납니다. 이는 상태 기반 스타일링(활성 탭, 에러 상태 등)에 가장 흔한 패턴입니다. ## :class의 배열 문법 — 여러 개 결합 ```vue ``` ## :class는 정적 class 속성과 병합됨 ```vue

...

``` `class`와 `:class`를 함께 사용할 수 있으며, Vue가 이를 병합합니다. ## :style의 객체/배열 문법 ```vue ``` ## 컴포넌트에 클래스 바인딩 ```vue ``` ## 왜 중요한가 동적 클래스/스타일 바인딩은 일상적인 Vue 작업입니다 — 활성 내비게이션 항목 강조, 검증 에러 표시, 테마 적용. 객체 문법(`{ className: condition }`)은 조건부 스타일링을 선언적이고 읽기 쉽게 만들어, 오류가 발생하기 쉬운 수동 문자열 연결을 피합니다. `:class`가 정적 `class`와 병합된다는 것과 소스를 결합하는 배열 형태를 알면 거의 모든 조건부 스타일링 요구를 깔끔하게 충족할 수 있습니다.