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

인라인 스타일 바인딩되기

#객체 구문 

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'
    }
}

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