Vue_class動態切換Style(實作)

本文总阅读量次

實作目的

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

執行步驟

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

1
2
3
4

data: {
    isTransform : false
  },

載入style變更box型態

1
2
3
4
5
6
7
8
9

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

套用公式 :class=”{‘classname : 判斷式’}”

1
2
3
4
5
<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置換
1
@click ="isTransform = !isTransform"
  1. @click後方寫入js函數內，並使用method將A=!A寫入運算內容也可以
1
2
3
4
methods: {
    changeRotate: function() {
      this.isRotate = !this.isRotate;
    },