[Vue.js] v-bind

v-bind는 엘리먼트의 상태값을 변경시켜줄 때 사용됩니다

 

사용 예시들을 정리해보겠습니다.

 

1) html태그내에 data 값을 가져와야할 때

<img v-bind:src="'images/' + winner + '.png'">

new Vue({
	data:{
    	winner: 'me'
    }
});

위와 같이 코드 작성 시 myChoice의 값인 'apple'을 가져와 img의 src가 "images/apple.png"로 바인딩됩니다.

그리고 'images/'와 '.png'는 문자열이므로 작은따옴표로 묶어주고 myChoice와는 +로 연결해 사용할 수 있습니다.

 

2) class 바인딩

같은 방식으로 class명도 data 값에 따라 변경해줄 수 있습니다.

<li v-bind:class="{winLi: winner == 'me', loseLi: winner == 'com'}">{{winner}}</li>

위 코드는 winner 값에 따라 클래스명을 변경시켜주는 코드입니다.

winner가 me일때는 클래스명이 winLi가 되고, winner가 com일때는 클래스명이 loseLi가 되기 때문에 data에 따라 다른 css를 갖게 하는데 사용될 수 있습니다.