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

클래스와 스타일 바인딩

---

HTML 클래스 바인딩하기

#객체 구문

클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.

일반 class 속성과 공존할 수 있다.

예제보기

#배열 구문

배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.

예제보기

목록에 있는 클래스를 조건부 토글 하려면 삼항 연산자를 이용할 수 있다. 

이는 항상 errorClass를 적용하고 isActive 가 true 일 때만 activeClass를 적용한다.

예제보기

그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있어서 배열 구문 내에서 객체 구문을 사용할 수 있다.

예제보기

#컴포넌트와 함께 사용하는 방법

사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추가된다. 이 엘리먼트는 기존 클래스는 덮어쓰지 않는다.

=> 예제를 보면 무슨 말인지는 알겠는데 어떻게 써야할지 모르겠다. 추후에 더 알아보는 걸로..

---

인라인 스타일 바인딩

#객체 구문

v-bind:style 객체 구문은 매우 직설적이다. 거의 css처럼 보이지만 JavaScript객체이다. 

예제보기

#배열 구문

v-bind:style 에 대한 배열 구문은 같은 스타일의 엘리먼트헤 여러 개의 스타일 객체를 사용할 수 있다.

#자동 접두사

v-bind:style 에 브라우저 벤더 접두어가 필요한 css속성을 사용하면 Vue는 자동으로 해당 접두어를 감지하여 스타일을 적용한다.

#다중 값 제공

스타일 속성에 접두사가 있는 여러 값을 배열로 전달할 수 있다.