如何在Vue中動態添加類名

做者：Michael Thiessen
譯者：前端小智
來源：forum.vuejs.org/

---

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

可以向組件添加動態類名是很是強大的功能。它使咱們能夠更輕鬆地編寫自定義主題，根據組件的狀態添加類，還能夠編寫依賴於樣式的組件的不一樣變體。

添加動態類名與在組件中添加 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="'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';
    }
  }
};

這不只易於閱讀，並且還能夠輕鬆添加新功能並在未來進行重構。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文:https://forum.vuejs.org/t/add...

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。