<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.alert-msg {
background: red;
color: white;
}
</style>
</head>
<div id="app">
<div :class="{ 'alert-msg': active }">이것은 클래스 바인딩을 이용한 메시지 입니다.</div>
<button @click="changeClass">클릭</button>
<hr/>
<div :style="{ color: color, background: back_color }">이것은 스타일 바인딩을 이용한 메시지 입니다.</div>
<button @click="changeStyle">클릭</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
active: false,
color: '#FF0000',
back_color: '#00FF00'
},
methods: {
changeClass() {
this.active = !this.active;
},
changeStyle() {
let color = this.color
this.color = this.back_color;
this.back_color = color;
}
}
})
</script>