能夠向組件添加動態類名是非常強大的功能。它使我們可以更輕松地編寫自定義主題，根據組件的狀態添加類，還可以編寫依賴於樣式的組件的不同變體。
添加動態類名與在組件中添加 prop :一樣簡單。無論classname的計算結果是什么，都將是添加到組件中的類名。
當然，對於vue中的動態類，我們可以做的還有很多。在本文中，我們將討論很多內容：
- 在 vue 中使用靜態和動態類
- 如何使用常規的 js 表達式來計算我們的類
- 動態類名的數組語法
- 對象語法
- 快速生成類名
- 如何在自定義組件上使用動態類名
靜態和動態類
在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類。
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
使用計算屬性來簡化類
最終，模板中的表達式將變得過於復雜，並將開始變得非常混亂和難以理解。幸運的是，我們有一個簡單的解決方案，就是使用計算民屬性：
<template>
<MovieList :movies="movies" :genre="genre" :class="class" /> </template> export default { computed: { class() { return darkMode ? 'dark-theme' : 'light-theme'; } } };