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 | <div id="app"> |
補充:點存取 vs. 中括號存取
物件可透過「點存取」來取用物件內的屬性,但是後面不能接帶有 Dash (-
) 符號的屬性名稱,這種時候就要改用「中括號」的方式來選取。
範例:
1 | <!-- 旋轉物件 Button --> |
補充:使用陣列格式加上複數個 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 | <div id="app"> |
動態切換 Style
目標:為 <div>
動態切換 Style。
1. 以物件格式加入 Style
- 寫法:
v-bind:style="{'樣式屬性': '樣式的值'}"
如果樣式名稱有 Dash (-
) 符號,要把它換成駝峰式寫法,像是 background-color
就要寫成 backgroundColor
。
例如::style="{'backgroundColor': 'red'}"
。
此外,因為是使用物件的格式,所以也可以將 Style 額外存作一個變數再來使用。
範例:
1 | <div id="app"> |
2. 以陣列格式加入 Style
概念就如同以陣列格式加入 ClassName 一樣,我們也可以使用陣列,一次加上多個 Style 的物件。
1 | <div id="app"> |
除此之外,也能先把一個個物件都存為變數後,再把它們綁定到 <div>
上。
1 | <div id="app"> |
補充:Vue 會自動加上前綴詞
使用 Vue 動態加入 Style 的時候,如果加入的樣式在其他瀏覽器需要加上 webkit
前綴詞,Vue 會自動加上這些 Prefix。
例如:漸層色的 webkit
會自動加入。
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。