class 속성 변경하기
class 속성의 특징 : 여러 개의 클래스를 중복해서 적용 가능
v-bind:class={ 클래스명: 값, 클래스명2: 값2 }
☆ Code
<!doctype html>
<html>
<head>
<title>Class ON/OFF</title>
<style>
.redfont {
color: red;
}
.boldfont {
font-weight: bold;
}
.bigfont {
font-size: 48px;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app8">
<p v-bind:class="titleOne">Title One</p>
<p v-bind:class="{ redfont: ron, boldfont: bon, bigfont: bion }">Test String</p>
<input type="checkbox" v-model="ron">빨간글자
<input type="checkbox" v-model="bon">굵은글자
<input type="checkbox" v-model="bion">큰글자
<p v-bind:class="{ redfont: 5>3? true:false }">Test String2</p>
<p v-bind:class="textcolor">I am a student</p>
</div>
</body>
<script>
var app8 = new Vue({
el: '#app8',
data: {
titleOne: 'bigfont boldfont',
ron: true,
bon: false,
bion: true
},
computed: {
textcolor: function(){
console.log("쟤가 갑자기 바꾸는데요?");
if(this.ron == true){
return 'redfont';
}
else {
return null;
}
}
}
});
</script>
</html>'Vue' 카테고리의 다른 글
| Vue.js trans (0) | 2025.01.15 |
|---|---|
| Vue.js form (0) | 2025.01.14 |
| Vue.js methods, computed, watch (0) | 2025.01.12 |
| Vue.js Component (0) | 2025.01.11 |
| Vue.js Model (0) | 2025.01.10 |