HTML 속성을 유동적으로 변경하는 방법을 알아보자.
먼저, 예전에 순수 HTML만을 이용해 style을 주는 코드는 아래와 같다.
<div style="background: red">
영역
</div>
Vue에서는 style의 값을 변수로 지정해 놓고 그 값을 태그에 바인딩 할 수 있다.
**참고, v-bind 와 : 는 동일하다 (속성의 값에 javascript 코드를 사용하고 싶을 때 쓴다)
<body>
<div id="root">
<div :style="style">
영역
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
style: 'background: tomato',
style: {
background: 'tomato',
fontSize: '2rem', // or 'font-size'
}
}
}
})
</script>
</body>style의 값은 'background: tomato'와 같이 문자열 또는 객체 형태로 나타낸다. 객체로 나타낼 때 주의할 점은 font-size와 같이 - 로 연결되어 있는 속성은 문자열로 묶어주던가, camel case를 사용해야 한다.
style을 여려개 적용시킬 땐 아래 코드와 같이 배열을 이용한다.
<body>
<div id="root">
<div :style="[style, fontStyle]">
영역
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
style: {
background: 'tomato'
},
fontStyle: {
fontSize: '2rem'
}
}
}
})
</script>
</body>
style 뿐만 아니라 class의 값도 동적으로 변경할 수 있다. 객체로 나타 낼 땐 객체 안에 있는 속성의 값이 true일 때 값이 출력된다. 이 점을 이용해 drop down 버튼을 만들 수 있다.
다음 챕터에서, Event handling을 배우고 dropdown 버튼을 만들어보자.
<body>
<div id="root">
<div :style="[style, fontStyle]" :class="[dropdown, toggle]">
영역
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
style: {
background: 'tomato'
},
fontStyle: {
fontSize: '2rem'
},
dropdown: 'dropdown',
toggle: {
on: true
}
}
}
})
</script>
</body>
'Vue > Tutorial' 카테고리의 다른 글
| [Vue - tutorial] 배열 변경 감지 (0) | 2019.09.04 |
|---|---|
| [Vue - tutorial] event handling (0) | 2019.09.04 |
| [Vue - tutorial] 리스트 출력하기 (0) | 2019.09.03 |
| [Vue - tutorial] Vue devtools (0) | 2019.09.03 |
| [Vue - tutorial] 데이터 바인딩 (Data binding) (0) | 2019.09.03 |
