<div id="app">
<div class="box" :class="{ red: isActive }"></div>
<button v-on:click="isActive =!isActive">點擊</button>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background: #222;
}
.red {
background: red;
}
let vm = new Vue({
el: '#app',
data: {
isActive: true,
}
});
This Pen doesn't use any external CSS resources.