출처 : https://youtu.be/0OYoPxehX-4 (코지코더)
1. 클래스바인딩
<style>
.red{
color :red;
}
.bold {
font-weight: bold;
}
</style>
<body>
<div id="app">
<div :class ="{red:isRed, 'font-bold':isBold}">Hello</div>
<button @click ="update">isRed</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isRed : false,
isBold : false
},
methods : {
update(){
this.isRed = !this.isRed;
this.isBold = !this.isBold;
}
}
});
</script>
</body>2. 스타일 바인딩
- font-size말고 fontSize
<body>
<div id="app">
<div :style ="{color: color, fontSize : size}">Hello</div>
</div>
<script>
new Vue({
el: "#app",
data: {
color : 'red',
size : '30px'
},
methods : {
},
computed: {
},
watch : {
}
});
</script>
</body>
씩씩하게 공부중 (22.11~)