這裡來介紹在 Vue 動態加上 class
一樣先把 Vue 的架構先撰寫出來，而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class，再點擊一次時，會自動移除

<div id="app">
    <div class="box"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        isTransform: false
    }
});
</script>

不同於先前，我們這次在 data 內定義了一個 isTransform 的變數，並先給予 false 的值

<div id="app">
    <div class="box" :class="{ 'rotate' : true }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

動態加上 class 的方式，如上
用 v-bind 綁上 class 屬性，接著裡面用物件的形式 { '要加入的 class 名字' : 判斷式 }
我們先在裡面放置 true 就會發現 .box 已經加上 .rotate 了

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary">選轉物件</button>
</div>

如果改成我們的變數 isTransform 就會是 false 的結果，重點在於我們在點擊按鈕的時候要自動切換 true 和 false
這時候在按鈕內就可以增加 click 事件:

<div id="app">
    <div class="box" :class="{ 'rotate' : isTransform }"></div>
    <button class="btn btn-outline-primary" @click=" isTransform = !isTransform">選轉物件</button>
</div>

上面 isTransform = !isTransform 的意思是指，當為 true 時即改為 false，反之。