Vue 中可透過 v-bind 指令動態綁定類別名稱和樣式。要綁定類別名,使用v-bind:class 指令傳入對像或數組,對像中true 值表示對應類別名稱添加到元素上;要綁定樣式,使用v-bind:style 指令傳入對象,對象鍵表示CSS 屬性,值表示屬性值;v-bind 指令也可傳入數組值,每個數組元素為物件或字串;當綁定的資料值變化時,Vue 會自動更新元素的類別名稱或樣式,方便根據組件狀態或使用者互動改變元素外觀。
Vue 中動態綁定Class 和Style
Vue 中,可以透過使用v-bind 指令動態綁定定類別名稱和样式。
綁定類別名稱
要動態綁定類別名,可以使用v-bind:class
指令,傳入一個物件或陣列作為值。如果物件的值為 true,則對應的類別名稱會被加到元素上。
<code class="html"><div v-bind:class="{ active: isActive }"></div></code>
上面的程式碼區塊中,如果isActive
的值為true,則active
類別將被加入<div>
元素上。
綁定樣式
要動態綁定樣式,可以使用 v-bind:style
指令,傳入一個物件作為值。物件的鍵表示 CSS 屬性,值表示屬性的值。
<code class="html"><div v-bind:style="{ color: 'red', fontSize: '20px' }"></div></code>
上面的程式碼區塊中,<div>
元素的color
屬性將被設定為紅色,font-size
屬性將被設定為20 像素。
使用陣列值
v-bind:class
和v-bind:style
指令也可以傳入數組值。數組中的每個元素都應該是一個物件或字串。
<code class="html"><div v-bind:class="[class1, class2]"></div> <div v-bind:style="[['color', 'red'], ['font-size', '20px']]"></div></code>
回應資料變化
當綁定的資料值發生變化時,Vue 會自動更新元素的類別名稱或樣式。這使得動態綁定類別名稱和樣式非常方便,因為它們可以根據元件狀態或使用者互動來改變元素的外觀。
以上是vue中class和style如何動態綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章!