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> 可以加上像是 btnbtn-outline-primaryactive 等 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 會自動加入。

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