能夠為元件新增動態類別名稱是非常強大的功能。它使我們可以更輕鬆地編寫自訂主題，根據組件的狀態添加類，還可以編寫依賴樣式的組件的不同變體。
新增動態類別名稱與在元件中新增 prop :class="classname"一樣簡單。無論classname的計算結果是什麼，都會是新增到元件中的類別名稱。
當然，對於Vue中的動態類，我們可以做的還有很多。在本文中，我們將討論很多內容：
在Vue中，我們可以為元件新增靜態類別和動態類別。
靜態類別是那些永遠不會改變的乏味類，它們將始終出現在元件中。另一方面，我們可以在應用程式中新增和刪除動態類別。
新增靜態類別與在常規HTML中所做的是完全相同的
<template>
<span class="description">
This is how you add static classes in Vue.
</span>
</template>動態類別非常類似，但是我們必須使用Vue的特殊屬性語法v-bind，以便將JS 表達式綁定到我們的類別:
<template>
<span v-bind:class="'description'">
This is how you add static classes in Vue.
</span>
</template>這裡你會注意到，我們必須在動態類別名稱周圍添加額外的引號。
這是因為v-bind語法接受我們作為 JS 值傳遞的任何內容。添加引號可以確保Vue將其視為字串。
Vue還有一個v-bind的簡寫語法:
<template>
<span :class="'description'">
This is how you add static classes in Vue.
</span>
</template>真正奇妙的是，您甚至可以在同一個元件上同時擁有靜態類別和動態類。靜態類別用於我們知道不會更改的內容，例如定位和佈局，動態類別用於主題之類的：
<template>
<span class="description"
:class="theme"
>
This is how you add static classes in Vue.
</span>
</template>
export default {
data() { return {
theme: 'blue-theme',
};
}
};
----------------------------------------
.blue-theme {
color: navy;
background: white;
}在本例中，theme是包含我們將應用的類別名的變數。
由於v-bind可以接受任何 JS 表達式，因此我們可以用它做一些非常酷的事情。我最喜歡的是在模板中使用三元表達式，它往往是非常乾淨和可讀的。
<template>
<span class="description"
:class="darkMode ? 'dark-theme' : 'light-theme'"
>
This is how you add dynamic classes in Vue.
</span>
</template>如果darkMode為true，則將dark-theme用作我們的類別名稱。否則，我們選擇light-theme。
如果需要動態新增許多不同的類，可以使用陣列或物件。這兩種方法都很有用，我們先來看陣列方式。
因為我們只是在計算一個JS 表達式，所以可以將我們剛剛學到的表達式與數組語法結合起來
<template>
<span class="description"
:class="[
fontTheme,
darkMode ? 'dark-theme' : 'light-theme',
]"
>
This is how you add dynamic classes in Vue.
</span>
</template>我們使用數組在這個元素上設定兩個動態類名。 fontTheme的值是一個類別名，它將改變字體的外觀。在前面的範例中，我們仍然可以使用darkMode變數在dark-theme和light-theme之間切換。
我們甚至可以使用物件來定義動態類別的列表，這給了我們更多的靈活性。
對於任何值為真的鍵/值對，它將把鍵用作類別名稱。讓我們來看一個物件語法的範例:
<template>
<span class="description"
:class="{
'dark-theme': darkMode,
'light-theme': !darkMode,
]"
>
This is how you add dynamic classes in Vue.
</span>
</template>我們的物件包含兩個鍵:dark-theme和light-theme。與我們先前實作的邏輯類似，我們希望基於darkMode的值在這些主題之間切換。
當darkMode為 true 時，會把dark-theme當作動態類別名稱套用到我們的元素。但是light-them不會被套用，因為!darkMode 值為false。
現在我們已經介紹了在Vue元件動態中新增類別的基礎知識。那麼如何使用自己的自訂元件來做到這一點？
假設我們在app 中有一個自訂元件
<template>
<MovieList
:movies="movies"
:genre="genre"
/>
</template>如果我們要動態新增一個將更改主題的類，我們該怎麼辦？其實很簡單。
我們只需要像以前那樣添加:class屬性
<template>
<MovieList
:movies="movies"
:genre="genre"
:class="darkMode ? 'dark-theme' : 'light-theme'"
/>
</template>之所以起作用，是因為Vue直接在MovieList#的根元素上設定類別。
在元件上設定props時，當Vue會將這些props與元件在其props部分中指定的props進行比較。如果有匹配項，它將作為常規props傳遞。否則，Vue會將其加入根DOM元素中。
在這裡，由於MovieList沒有指定class屬性，因此Vue知道應該在根元素上進行設定。
不過，我們可以用動態類別名稱做一些更進階的事情。
我們已經介紹了許多動態新增或刪除類別名稱的不同方法。但是動態生成類別名稱本身又如何呢？
假設有一個Button元件，它為所有不同類型的按鈕提供20種不同的CSS樣式。
你可能不想花一整天的时间把每一项都写出来，也不想把开关的逻辑都写出来。相反，我们将动态生成要应用的类的名称。
<template>
<span
class="description"
:class="theme"
>
This is how you add static classes in Vue.
</span>
</template>
export default {
data() {
return {
theme: 'blue-theme',
};
}
};
.blue-theme {
color: navy;
background: white;
}我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button组件执行此操作，则可以执行以下简单操作：
<template>
<button
@click="$emit('click')"
class="button"
:class="theme"
>
{{ text }}
</button>
</template>
export default {
props: {
theme: {
type: String,
default: 'default',
}
}
};
.default {}
.primary {}
.danger {}现在，使用Button组件的任何人都可以将theme属性设置为他们想要使用的任何主题。
如果没有设置任何类，它将添加.default类。如果将其设置为primary，则会添加.primary类。
最终，模板中的表达式将变得过于复杂，并将开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，就是使用计算民属性：
<template>
<MovieList
:movies="movies"
:genre="genre"
:class="class"
/>
</template>
export default {
computed: {
class() {
return darkMode ? 'dark-theme' : 'light-theme';
}
}
};这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。
英文原文地址：https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626
为了保证的可读性，本文采用意译而非直译。
相关推荐：
更多编程相关知识，请访问：编程教学！！
以上是詳解Vue中動態添加類別名稱的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
