<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,
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js