v-bind는 : 약어로 사용 가능
예시 v-bind:class
:class
동일한 의미
class 바인딩
<template>
<div class="active"></div>
<div :class="activeClass"></div>
<div :class="{ active : isAcitve }"></div>
// 삼항 연산자로 class 바인딩 가능
<div :class="[ isAcitve ? 'active' : '' ]"></div>
</template>
export default{
name : "test",
data(){
return {
activeClass : "active",
isAcitve : true,
}
}
}
style 바인딩
<template>
<div :style="{ color : activeColor, fontSize : fontSize "></div>
<div :style="styleObject"></div>
<div :style="[ isAcitve ? 'font-size : 32px' : '16px' ]"></div>
</template>
export default{
name : "test",
data(){
return {
activeColor : "blue",
fontSize : "30px",
styleObject : {
color : "red",
fontSize : "20px"
},
isActive : true
}
}
}
'VUE' 카테고리의 다른 글
[Vue] transition 사용법 (0) | 2023.12.27 |
---|---|
[Vue] $emit & $props (1) | 2023.12.22 |
[Vue] 조건부 렌더링 v-if, v-show & 반복 렌더링 v-for (0) | 2023.12.21 |
[Vue] Computed vs Watch (0) | 2023.12.19 |
[Vue] vue2 라이프 사이클 (0) | 2023.12.19 |