詳解Vue中動態添加類別名稱的方法

能夠為元件新增動態類別名稱是非常強大的功能。它使我們可以更輕鬆地編寫自訂主題，根據組件的狀態添加類，還可以編寫依賴樣式的組件的不同變體。

新增動態類別名稱與在元件中新增 prop :class="classname"一樣簡單。無論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="&#39;description&#39;">
    This is how you add static classes in Vue.
  </span>
</template>

這裡你會注意到，我們必須在動態類別名稱周圍添加額外的引號。

這是因為v-bind語法接受我們作為 JS 值傳遞的任何內容。添加引號可以確保Vue將其視為字串。

Vue還有一個v-bind的簡寫語法:

<template>
  <span :class="&#39;description&#39;">
    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: &#39;blue-theme&#39;,
    };
  }
};
----------------------------------------
.blue-theme {
  color: navy;
  background: white;
}

在本例中，theme是包含我們將應用的類別名的變數。

有條件的類別名稱

由於v-bind可以接受任何 JS 表達式，因此我們可以用它做一些非常酷的事情。我最喜歡的是在模板中使用三元表達式，它往往是非常乾淨和可讀的。

<template>
  <span    class="description"
    :class="darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  >
    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 ? &#39;dark-theme&#39; : &#39;light-theme&#39;,
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

我們使用數組在這個元素上設定兩個動態類名。 fontTheme的值是一個類別名，它將改變字體的外觀。在前面的範例中，我們仍然可以使用darkMode變數在dark-theme和light-theme之間切換。

使用物件語法

我們甚至可以使用物件來定義動態類別的列表，這給了我們更多的靈活性。

對於任何值為真的鍵/值對，它將把鍵用作類別名稱。讓我們來看一個物件語法的範例:

<template>
  <span    class="description"
    :class="{
      &#39;dark-theme&#39;: darkMode,
      &#39;light-theme&#39;: !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 ? &#39;dark-theme&#39; : &#39;light-theme&#39;"
  />
</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: &#39;blue-theme&#39;,
    };
  }
};

.blue-theme {
  color: navy;
  background: white;
}

我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button组件执行此操作，则可以执行以下简单操作：

<template>
  <button
    @click="$emit(&#39;click&#39;)"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: &#39;default&#39;,
    }
  }
};

.default {}

.primary {}

.danger {}

现在，使用Button组件的任何人都可以将theme属性设置为他们想要使用的任何主题。

如果没有设置任何类，它将添加.default类。如果将其设置为primary，则会添加.primary类。

使用计算属性来简化类

最终，模板中的表达式将变得过于复杂，并将开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，就是使用计算民属性：

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="class"
  />
</template>

export default {
  computed: {
    class() {
      return darkMode ? &#39;dark-theme&#39; : &#39;light-theme&#39;;
    }
  }
};

这不仅易于阅读，而且还可以轻松添加新功能并在将来进行重构。

英文原文地址：https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626

为了保证的可读性，本文采用意译而非直译。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

以上是詳解Vue中動態添加類別名稱的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！