Vue에서 style 바인딩 예제

Vue에서는 각종 엘리먼트에 바인딩이 가능하다.

즉, Vue에서 쓰이는 데이터들을 엘리먼트에 삽입이 가능하다는 것인데 style을 예제로 이용해보려 한다.

<div id="button-box">

<button class="btn-round" @click="select()">

<img src=""/><br>

</button>

</div>

위와같이 div에는 이미 button-box라는 css가 적용되어있다.

하지만 필자는 각종 device에 서로다른 margin-left를 주기 위해 스타일을 바인딩하려한다.

data () {

return {

deviceWidth: 0,

deviceML: 0

}

},

data부분에 두 변수를 선언하고

created() {

this.deviceWidth = Math.max(window.screen.width, window.innerWidth)

this.deviceML = (this.deviceWidth-240)/4

},

created 부분에 내가 원하는 device에 따라 margin left를 어떻게 줄 지 deviceML에 선언한다.

<div id="button-box" :style=" { marginLeft: deviceML + 'px'}">

<button class="btn-round" @click="select()">

<img src=""/><br>

</button>

</div>

이제 :style를 통해 스타일을 바인딩하자.

이때 margin-left라 적으면 안되고 카멜형식으로 marginLeft라고 적어야함은 기억해두자.