# [Vue.js] v-class動態切換className
###### tags: `Vue.js`

需求是要點擊按鈕後的切換物件的型態，可使用判斷式來開關呈現的狀態


在data裡新增一個變數以布林值為判斷單位

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

載入style變更box型態

<style>
.box {
  transition: transform .5s;
}
.box.rotate {
  transform: rotate(45deg)
}
</style>

套用公式 :class="{'classname : 判斷式'}"

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

以下有兩種方式讓isTransform產生置換
1. 直接將A=!A寫入html，當@click點擊觸發後便會產生true跟false置換

@click ="isTransform = !isTransform"

2. @click後方寫入js函數內，並使用method將A=!A寫入運算內容也可以

methods: {
    changeRotate: function() {
      this.isRotate = !this.isRotate;
    },