<div v-bind:class="{ active: isActive}"></div>data: {
isActive: true
}위 구문은 active 클래스는 isActive의 true, false에 에 의해 결정됨
HTML 클래스 바인딩 - 객체 구문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 클래스와 바인딩</title>
<style>
.red {
color: red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="{red: isRed }">Hello</div>
<button @click="update">Click</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isRed: false
},
methods: {
update() {
this.isRed = !this.isRed;
}
}
})
</script>
</body>- class 객체에 data를 bind 시켜줌 (v-bind와 ':' 동일)
- isRed의 값은 Button의 onClick(@click과 동일)에 의한 update 메소드 실행으로 true,false 값이 바뀜
- isRed 값이 true 이면 "Hello"가 빨간색 글자로 바뀌게 됨 (아래 캡쳐본)
스타일 바인딩 - 객체 구문
data를 이용하여 인라인 스타일을 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 클래스와 바인딩</title>
<style>
.red {
color: red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="styleObject">Hello</div>
</div>
<script>
new Vue({
el: "#app",
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
</script>
</body>
</html>- styleObject라는 객체를 data에 만들어 스타일 객체에 직접 bind
- "Hello"라는 글자에 빨간색 글자가 적용됨 (아래 캡쳐본)
스타일 바인딩 - computed 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰 클래스와 바인딩</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="computedStyleObject">Hello</div>
<button @click="update()">Click</button>
</div>
<script>
new Vue({
el: "#app",
data: {
styleObject: {
red: 'red',
size: '30px'
}
},
computed: {
computedStyleObject() {
return {
color: this.styleObject.red,
size: this.styleObject.size
};
}
},
methods: {
update() {
this.styleObject.red = 'blue';
this.styleObject.size = '50px';
}
}
})
</script>
</body>
</html>- 스타일객체에 computed 속성인 computedStyleObject를 bind
- Button의 @click에 의한 update 메소드 실행으로 styleObject 값이 각각 blue, 50px로 바뀜 (전,후 아래 캡쳐본)
지극히 개인적인 내 개발스터디 공간