클래스와 스타일 바인딩

데이터 바인딩은 엘리먼트의 class 목록과 인라인 스타일을 변경하기 위해 일반적으로 사용한다

HTML 클래스 바인딩하기

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

클래스를 동적으로 변경하기 위해 v-bind를 사용합니다.

위의 구문은 active 클래스가 isActive의 값에 따라 적용될지 안될지를 판단합니다.

v-bind:class 디렉티브는 일반 클래스class 속성과 사용이 가능합니다.

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

다음과 같이 사용한다.

data: { isActive: true, hasError: false }

그러면 div의 클래스는 "static active"가 되는거죠.

바인딩된 객체가 인라인일 필요는 없다.

<div v-bind:class="classObject"></div>

data: { classObject: { active: true, 'text-danger': false } }

계산된 속성도 사용이 가능하다.

data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }

배열 구문

<div v-bind:class="[activeClass, errorClass]">

data: { activeClass: 'active', errorClass: 'text-danger' }

이렇게도 사용이 가능하다.

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

표현식이라 삼향연산자도 사용이 가능하다.

<div v-bind:class="[{ active: isActive }, errorClass]">

배열 구문 내에서 객체도 사용이 가능하다.

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

Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })

컴포넌트에 class를 추가할경우 root엘리먼트에 클래스가 추가된다.

<my-component class="baz boo"></my-component>

렌더링된 결과

<p class="foo bar baz boo">Hi</p>

클래스 바인딩도 동일하다.

인라인 스타일 바인딩

v-bind:style의 속성은 매우 직관적이다.

css처럼 보일 수 있지만 js 객체다.

camelCase와 kebab-case를 사용해야 됩니다.

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

<div v-bind:style="styleObject"></div>

data: { styleObject: { color: 'red', fontSize: '13px' } }

스타일 객체에 직접 바인딩해서 사용하는것이 더 편하다.

배열 구문

<div v-bind:style="[baseStyles, overridingStyles]">

배열 구문이 사용 가능하다.

자동 접두사

벤더 접두어가 필요하면 자동으로 Vue에서 붙여줍니다.

다중 값 제공

2.3.0+

2.3버전 부터 스타일 속성에 접두사가 있는 여러 값을 배열로 전달할 수 있습니다. 예제입니다.

<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">