[Vue] Vue에서 style 속성 데이터바인딩 하는 법

작업을 하다보면 :style=”” 안에 자바스크립트 데이터를 집어넣을 일이 많습니다.
그냥 콜론 붙이고 데이터 바인딩 해도 되는데, Object 형태로도 CSS 속성을 넣을 수 있습니다.

<div :style="{ fontSize : '20px', marginTop : '10px' }">
<div :style="{ color : 'red' }">

위와 같이 style 속성을 부여할 수 있습니다.

한 가지 주의할 점은 CSS 속성명에 - 대시기호를 쓸 수 없다는 것입니다. 그래서 카멜케이스 방식으로 바꿔 써야합니다.

<div class="post-body" :style="{ backgroundImage : 'url(image1.png)' }"></div>

자바스크립트에서 문자 중간에 변수를 집어넣는 방법은

'문자' + 변수 + '문자'
`문자 ${변수} 문자`