vue中class和style如何動態綁定

Vue 中可透過 v-bind 指令動態綁定類別名稱和樣式。要綁定類別名，使用v-bind:class 指令傳入對像或數組，對像中true 值表示對應類別名稱添加到元素上；要綁定樣式，使用v-bind:style 指令傳入對象，對象鍵表示CSS 屬性，值表示屬性值；v-bind 指令也可傳入數組值，每個數組元素為物件或字串；當綁定的資料值變化時，Vue 會自動更新元素的類別名稱或樣式，方便根據組件狀態或使用者互動改變元素外觀。

Vue 中動態綁定Class 和Style

Vue 中，可以透過使用v-bind 指令動態綁定定類別名稱和样式。

綁定類別名稱

要動態綁定類別名，可以使用v-bind:class 指令，傳入一個物件或陣列作為值。如果物件的值為 true，則對應的類別名稱會被加到元素上。

<div v-bind:class="{ active: isActive }"></div>

上面的程式碼區塊中，如果isActive 的值為true，則active 類別將被加入<div> 元素上。 <p><strong>綁定樣式</strong></p> <p>要動態綁定樣式，可以使用 <code>v-bind:style 指令，傳入一個物件作為值。物件的鍵表示 CSS 屬性，值表示屬性的值。

<div v-bind:style="{ color: 'red', fontSize: '20px' }"></div>

上面的程式碼區塊中，<div> 元素的<code>color 屬性將被設定為紅色，font-size 屬性將被設定為20 像素。

使用陣列值

v-bind:class 和v-bind:style 指令也可以傳入數組值。數組中的每個元素都應該是一個物件或字串。

<div v-bind:class="[class1, class2]"></div>
<div v-bind:style="[['color', 'red'], ['font-size', '20px']]"></div>

回應資料變化

當綁定的資料值發生變化時，Vue 會自動更新元素的類別名稱或樣式。這使得動態綁定類別名稱和樣式非常方便，因為它們可以根據元件狀態或使用者互動來改變元素的外觀。