Vue 初心者筆記 #4 透過 v-bind 動態加入 ClassName 與 Style

發表於 分類於

本篇介紹如何透過 v-bind 指令來動態加入或移除 Class 與 Style，這應該算是滿常用到的技巧喔 👀

動態切換 ClassName

目標：為 <div> 動態切換 ClassName，以製作出旋轉的效果。

STEP 1：具有判斷式的 v-bind

要為一個元素動態加入 ClassName 的話，可以用 v-bind 綁定 Class，並使用條件判斷式，來動態判斷是否要加上該 ClassName。

  • 判斷式：{'要加入的 ClassName': 判斷式}

在 v-bind 加入條件判斷時，我們會用一個”冒號”把前後的屬性分開，前方是我們要加入的 ClassName，後方則是判斷式。
我們要動態調整 ClassName 的方式，就是去調整判斷式的內容與結果。

1
<div class="box" :class="{'rotate': isTransform}"></div>

v-bind 的判斷條件式為物件格式，可以加上逗號來加入多個值

STEP 2：使用 v-on 監聽事件

我們可以使用 v-on 綁定像是 <button> 這類的 Trigger 來監聽事件。

通常這後面接的事件，會是一個完整的 Method 的名稱，不過這裡要直接寫上 Function 效果。
這邊的事件要做的，就是讓 isTransform 的值相反 (true ←→ false)，也就是說，如果 isTransform 的值原本是 false 的話，點擊按鈕後就會變成 true。

1
<button class="btn" @click="isTransform = !isTransform">旋轉物件</button>

STEP 3：整理一下程式碼

統合一下上面兩個步驟，我們新增了 :class 與 @click。
範例程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
  <div class="box" :class="{ 'rotate': isTransform }"></div>
  <button class="btn btn-outline-primary" @click="isTransform = !isTransform">
    旋轉物件
  </button>
</div>

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

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

補充：點存取 vs. 中括號存取

物件可透過「點存取」來取用物件內的屬性，但是後面不能接帶有 Dash (-) 符號的屬性名稱，這種時候就要改用「中括號」的方式來選取。
範例：

1
2
3
4
5
6
7
8
<!-- 旋轉物件 Button -->
<button class="btn" @click="objectClass.rotate = !objectClass.rotate">
  旋轉物件
</button>

<!-- 切換色彩 Checkbox -->
<input type="checkbox" id="classToggle2" v-model="objectClass['bg-danger']" />
<label for="classToggle2">切換色彩</label>

補充：使用陣列格式加上複數個 ClassName

Bootstrap 4 針對 <button> 可以加上像是 btn、btn-outline-primary、active 等 Class。
例如：

1
<button class="btn, btn-outline-primary, active">按鈕</button>

如果我們希望後面的兩個 Class 改為動態加入的話，我們可以用 v-bind 的陣列格式，一次動態加入複數個 Class。

1
<button class="btn" :class="['btn-outline-primary', 'active']">按鈕</button>

此時，上下兩個 <button> 的效果相同

補充：使用 Checkbox + 陣列加上 ClassName

如果我們不確定有多少 Class 要加上，即不確定 ClassName 數量的時候，
我們可以透過 Checkbox 把要加的 ClassName 勾選起來，並放進一個宣告的空陣列 arrayClass 當中，最後再透過 v-bind 將陣列中的所有 Class 加入 <button>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="app">
  <button class="btn" :class="arrayClass">元件</button>

  <!-- 點擊後加上 btn-outline-primary -->
  <input
    type="checkbox"
    id="classToggle"
    v-model="arrayClass"
    value="btn-outline-primary"
  />
  <label for="classToggle">加上 btn 樣式</label>

  <!-- 點擊後加上 active -->
  <input
    type="checkbox"
    id="classToggle2"
    v-model="arrayClass"
    value="active"
  />
  <label for="classToggle2">加上 active</label>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      ...,
      // Array 操作
      arrayClass: [],
    },
  })
</script>

動態切換 Style

目標：為 <div> 動態切換 Style。

1. 以物件格式加入 Style

  • 寫法：v-bind:style="{'樣式屬性': '樣式的值'}"

如果樣式名稱有 Dash (-) 符號，要把它換成駝峰式寫法，像是 background-color 就要寫成 backgroundColor。
例如：:style="{'backgroundColor': 'red'}"。

此外，因為是使用物件的格式，所以也可以將 Style 額外存作一個變數再來使用。
範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
  <div class="box" :style="styleObject"></div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px',
      },
    },
  });
</script>

2. 以陣列格式加入 Style

概念就如同以陣列格式加入 ClassName 一樣，我們也可以使用陣列，一次加上多個 Style 的物件。

1
2
3
4
5
6
<div id="app">
  <div
    class="box"
    :style="[{'backgroundColor': 'red'}, {'borderWidth': '5px'}]"
  ></div>
</div>

除此之外，也能先把一個個物件都存為變數後，再把它們綁定到 <div> 上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  <div class="box" :style="[styleObject, styleObject2]"></div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // 存為變數
      styleObject: {
        backgroundColor: 'red',
        borderWidth: '5px',
      },
      styleObject2: {
        boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)',
      },
    },
  });
</script>

補充：Vue 會自動加上前綴詞

使用 Vue 動態加入 Style 的時候，如果加入的樣式在其他瀏覽器需要加上 webkit 前綴詞，Vue 會自動加上這些 Prefix。
例如：漸層色的 webkit 會自動加入。

以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。