<div id="app">
<p v-bind:class="classOn">ここのクラスを付け替えます</p>
<button @click="toggle">クリックで実行</button>
</div>
body {
background-color: #fff;
}
.active{
background:red;
}
.off{
background:blue;
color:#fff;
}new Vue({
el: "#app",
data: {
classOn:"active"
},
methods: {
toggle: function() {
if(this.classOn == "off"){
this.classOn = "active";
}else{
this.classOn = "off";
}
}
}
})
External CSS
This Pen doesn't use any external CSS resources.