vue.js 인라인 스타일 바인딩되기 2

인라인 스타일 바인딩되기

#배열구문

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

HTML부분
<div v-bind:style="[basestyles, overridingStyles]"></div>

JS부분

data:{
        basestyles: {
            fontSize: '30px'
        }, 
        overridingStyles:{
            color :'yellow'
        }
}

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

#다중 값 제공

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

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>
브라우저가 지원하는 배열의 마지막 값만 렌더링합니다.
이 예제에서는 flexbox의 접두어가 붙지 않은 버전을 지원하는 브라우저에 대해 display:flex를 렌더링합니다.