Vue CSS 繫結
瞭解如何使用 v-bind 透過 style 和 class 屬性修改 CSS。
雖然使用 v-bind 修改 style 和 class 屬性的概念相當直接，但語法可能需要一些時間來適應。
Vue 中的動態 CSS
您已經看到我們如何使用 Vue 透過 v-bind 在 style 和 class 屬性上修改 CSS。本教程已在 v-bind 部分簡要解釋了這一點，並且還提供了一些 Vue 更改 CSS 的示例。
在這裡，我們將更詳細地解釋如何使用 Vue 動態更改 CSS。但首先，讓我們看一下本教程中我們已經見過的兩種技術：內聯樣式使用 v-bind:style 和使用 v-bind:class 分配類。
內聯樣式
我們在 Vue 中使用 v-bind:style 進行內聯樣式。
示例
使用 type="range" 的 <input> 元素用於透過內聯樣式更改 <div> 元素的不透明度。
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
拖動上面的範圍輸入以在此處更改不透明度。
</div>
自己動手試一試 »
分配類
我們在 Vue 中使用 v-bind:class 為 HTML 標籤分配類。
示例
選擇食物圖片。透過使用 v-bind:class 來突出顯示所選食物，以顯示您已選擇的內容。
<div v-for="(img, index) in images">
<img v-bind:src="img.url"
v-on:click="select(index)"
v-bind:class="{ selClass: img.sel }">
</div>
自己動手試一試 »
分配類和樣式的其他方法
以下是關於 v-bind:class 和 v-bind:style 用法的一些不同方面，這些方面在本教程中我們之前沒有見過。
- 當 CSS 類透過
class=""和v-bind:class=""分配給 HTML 標籤時，Vue 會合並這些類。 - 包含一個或多個類的物件使用
v-bind:class="{}"分配。在物件內部，一個或多個類可以開啟或關閉。 - 使用內聯樣式 (
v-bind:style) 時，建議在定義 CSS 屬性時使用駝峰式命名法，但如果 CSS 屬性寫在引號內，也可以使用“kebab-case”（短橫線命名法）。 - CSS 類可以與陣列/陣列表示法/語法一起分配
這些要點將在下面更詳細地解釋。
1. Vue 合併 'class' 和 'v-bind:class'
在 HTML 標籤屬於透過 class="" 分配的類，並且也屬於透過 v-bind:class="" 分配的類的情況下，Vue 會為我們合併這些類。
示例
一個 <div> 元素屬於兩個類：“impClass”和“yelClass”。“important”類使用 class 屬性正常設定，而“yellow”類使用 v-bind:class 設定。
<div class="impClass" v-bind:class="{yelClass: isYellow}">
此 div 屬於 'impClass' 和 'yelClass'。
</div>
自己動手試一試 »
2. 使用 'v-bind:class' 分配多個類
當使用 v-bind:class="{}" 將 HTML 元素分配給一個類時，我們可以簡單地使用逗號分隔並分配多個類。
示例
一個 <div> 元素可以根據布林 Vue 資料屬性 'isYellow' 和 'isImportant' 屬於 'impClass' 和 'yelClass' 類。
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
此標籤可以同時屬於 'impClass' 和 'yelClass' 類。
</div>
自己動手試一試 »
3. 'v-bind:style' 的駝峰式與短橫線命名法
在 Vue 中使用內聯樣式 (v-bind:style) 修改 CSS 時，建議對 CSS 屬性使用駝峰式命名法，但如果 CSS 屬性在引號內，也可以使用“kebab-case”（短橫線命名法）。
示例
在這裡，我們用兩種不同的方式為 <div> 元素設定 CSS 屬性 background-color 和 font-weight：推薦的駝峰式 backgroundColor，以及不推薦的帶引號的“kebab-case” 'font-weight'。兩種選擇都有效。
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
此 div 標籤具有粉色背景和粗體文字。
</div>
自己動手試一試 »
“駝峰式”和“kebab-case”（短橫線命名法）是寫作一系列單詞而不使用空格或標點符號的方法。
- 駝峰式命名法是指第一個單詞以小寫字母開頭，之後每個單詞都以大寫字母開頭，例如“backgroundColor”或“camelCaseNotation”。它之所以稱為駝峰式，是因為我們可以想象每個大寫字母都像駱駝背上的駝峰。
- Kebab case（短橫線命名法）是指單詞用連字元
-分隔，例如“background-color”或“kebab-case-notation”。它之所以稱為 kebab case，是因為我們可以想象連字元就像“烤肉串”中的串。
4. 'v-bind:class' 的陣列語法
我們可以使用陣列語法與 v-bind:class 來新增多個類。使用陣列語法，我們可以使用依賴於 Vue 屬性的類和不依賴於 Vue 屬性的類。
示例
在這裡，我們使用陣列語法設定 CSS 類“impClass”和“yelClass”。類“impClass”依賴於 Vue 屬性 isImportant，而類“yelClass”始終附加到 <div> 元素。
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
此 div 標籤取決於 isImportant 屬性，它屬於一個或兩個類。
</div>
自己動手試一試 »
