728x90
Vue.js Vue 클래스와 스타일 바인딩 개념 및 예제
코드 - Vue 클래스 바인딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 클래스 바인딩</title>
<style>
.red {
color: red;
}
.font-bold {
font-weight: bold;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="{ red: isRed, 'font-bold': isBold }">Hello</div>
<button @click="change">Click!</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isRed: false,
isBold: false
},
methods: {
change() {
this.isRed = !this.isRed;
this.isBold = !this.isBold;
}
}
})
</script>
</body>
</html>
실행 결과
코드 - Vue 스타일 바인딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 스타일 바인딩</title>
<style>
.red {
color: red;
}
.font-bold {
font-weight: bold;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="{ color: red, fontSize: size }">스타일 바인딩 연습</div>
</div>
<script>
new Vue({
el: '#app',
data: {
red: 'red',
size: '30px'
}
})
</script>
</body>
</html>
실행 결과
728x90
'개념정리 > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue v-for와 key 개념 및 예제 (1) | 2022.04.26 |
|---|---|
| [Vue.js] Vue v-if와 v-show 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue watch 속성 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue computed 속성 개념 및 예제 (0) | 2022.04.26 |
| [Vue.js] Vue 데이터 양방향 바인딩 개념 및 예제 (0) | 2022.04.26 |
댓글