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

인라인 스타일 바인딩되기

#객체 구문 

v-bind:style객체 구문은 매우 직설적입니다. 
거의 CSS처럼 보이지만 javascript객체입니다.
속성 이름에 camelCase와 kebab-case(따옴표를 함께 사용해야 합니다)를 사용할 수 있습니다.

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

JS부분
data:{
    activeColor: 'red',
    fontSize: 30
}

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

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

JS부분
data:{
    styleObject:{
        color:'red',
        fontSize: '30px'
    }
}

다시 객체 구문은 종종 객체를 반환하는 계산된 속성과 함께 사용합니다.

#배열구문

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를 렌더링합니다.