---
# System prepended metadata

title: '[Vue.js] v-class動態切換className'
tags: [Vue.js]

---

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


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

![](https://i.imgur.com/IQr9v6G.png)


在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;
    },
```








