인라인 스타일 바인딩

1. 객체 구문

1) v-bind 인라인 스타일 바인딩 이용

• v-bind:style 객체 구문은 매우 직설적으로, 거의 CSS 처럼 보이지만 JavaScript 객체이다.
• 속성 이름에 camelCase와 kebab-case를 사용할 수 있다.

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

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

 

2) 스타일 객체에 직접 바인딩 하여 템플릿이 더 간결하도록 만드는 것이 좋다.

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

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

 

 

2. 배열 구문

v-bind:style에 대한 배열 구문을 이용하여 여러 개의 스타일 객체를 사용할 수 있다.

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

 

3. 자동 접두사

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

 

4. 다중 값 제공

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

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

브라우저가 지원하는 배열의 마지막 값만 렌더링한다. 이 예제에서는 flexbox의 접두어가 붙지않은 버전을 지원하는 브라우저에 대해 display : flex를 렌더링한다.