Vue中如何動態(tài)添加類名-創(chuàng)新互聯(lián)

小編給大家分享一下Vue中如何動態(tài)添加類名，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為富順企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站設(shè)計，富順網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

能夠向組件添加動態(tài)類名是非常強大的功能。它使我們可以更輕松地編寫自定義主題，根據(jù)組件的狀態(tài)添加類，還可以編寫依賴于樣式的組件的不同變體。

添加動態(tài)類名與在組件中添加 prop:class="classname"一樣簡單。無論classname的計算結(jié)果是什么，都將是添加到組件中的類名。

當(dāng)然，對于Vue中的動態(tài)類，我們可以做的還有很多。在本文中，我們將討論很多內(nèi)容：

在 Vue 中使用靜態(tài)和動態(tài)類
如何使用常規(guī)的 JS 表達式來計算我們的類
動態(tài)類名的數(shù)組語法
對象語法
快速生成類名
如何在自定義組件上使用動態(tài)類名

靜態(tài)和動態(tài)類

在Vue中，我們可以向組件添加靜態(tài)類和動態(tài)類。

靜態(tài)類是那些永遠不會改變的乏味類，它們將始終出現(xiàn)在組件中。另一方面，我們可以在應(yīng)用程序中添加和刪除動態(tài)類。

添加靜態(tài)類與在常規(guī)HTML中所做的是完全相同的

<template>
  <span class="description">
    This is how you add static classes in Vue.
  </span>
</template>

動態(tài)類非常類似，但是我們必須使用Vue的特殊屬性語法v-bind，以便將 JS 表達式綁定到我們的類:

<template>
  <span v-bind:class="'description'">
    This is how you add static classes in Vue.
  </span>
</template>

這里你會注意到，我們必須在動態(tài)類名周圍添加額外的引號。

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

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

<template>
  <span :class="'description'">
    This is how you add static classes in Vue.
  </span>
</template>

真正奇妙的是，您甚至可以在同一個組件上同時擁有靜態(tài)類和動態(tài)類。靜態(tài)類用于我們知道不會更改的內(nèi)容，比如定位和布局，動態(tài)類用于主題之類的：

<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是包含我們將應(yīng)用的類名的變量。

有條件的類名

由于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。

使用數(shù)組語法

如果需要動態(tài)添加許多不同的類，可以使用數(shù)組或?qū)ο蟆＿@兩種方法都很有用，我們先來看數(shù)組方式。

因為我們只是在計算一個 JS 表達式，所以可以將我們剛剛學(xué)到的表達式與數(shù)組語法結(jié)合起來

<template>
  <span    class="description"
    :class="[
      fontTheme,
      darkMode ? 'dark-theme' : 'light-theme',
    ]"
  >
    This is how you add dynamic classes in Vue.
  </span>
</template>

我們使用數(shù)組在這個元素上設(shè)置兩個動態(tài)類名。fontTheme的值是一個類名，它將改變字體的外觀。在前面的例子中，我們?nèi)匀豢梢允褂?code>darkMode變量在dark-theme和light-theme之間切換。

使用對象語法

我們甚至可以使用對象來定義動態(tài)類的列表，這給了我們更多的靈活性。

對于任何值為真的鍵/值對，它將把鍵用作類名。讓我們看一個對象語法的例子:

<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。與我們之前實現(xiàn)的邏輯類似，我們希望基于darkMode的值在這些主題之間切換。

當(dāng)darkMode為true 時，會把dark-theme作為一個動態(tài)類名應(yīng)用于我們的元素。但是light-them不會被應(yīng)用，因為!darkMode 值為false。

現(xiàn)在我們已經(jīng)介紹了向Vue組件動態(tài)添加類的基礎(chǔ)知識。那么如何使用自己的自定義組件來做到這一點？

與自定義組件一起使用

假設(shè)我們在 app 中有一個自定義組件

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

如果我們要動態(tài)添加一個將更改主題的類，我們該怎么辦？其實很簡單。

我們只需要像以前那樣添加:class屬性

<template>
  <MovieList
    :movies="movies"
    :genre="genre"
    :class="darkMode ? 'dark-theme' : 'light-theme'"
  />
</template>

之所以起作用，是因為Vue直接在MovieList的根元素上設(shè)置類。

在組件上設(shè)置props時，Vue會將這些props與組件在其props部分中指定的props進行比較。如果有匹配項，它將作為常規(guī)props傳遞。否則，Vue會將其添加到根DOM元素中。

在這里，由于MovieList沒有指定class屬性，因此Vue知道應(yīng)該在根元素上進行設(shè)置。

不過，我們可以用動態(tài)類名做一些更高級的事情。

快速生成類名

我們已經(jīng)介紹了許多動態(tài)添加或刪除類名的不同方法。但是動態(tài)生成類名本身又如何呢？

假設(shè)有一個Button組件，它為所有不同類型的按鈕提供20種不同的CSS樣式。

你可能不想花一整天的時間把每一項都寫出來，也不想把開關(guān)的邏輯都寫出來。相反，我們將動態(tài)生成要應(yīng)用的類的名稱。

<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;
}

我們可以設(shè)置一個變量來包含我們想要的任何類名的字符串。如果我們想對Button組件執(zhí)行此操作，則可以執(zhí)行以下簡單操作：

<template>
  <button
    @click="$emit('click')"
    class="button"
    :class="theme"
  >
    {{ text }}
  </button>
</template>

export default {
  props: {
    theme: {
      type: String,
      default: 'default',
    }
  }
};

.default {}

.primary {}

.danger {}

現(xiàn)在，使用Button組件的任何人都可以將theme屬性設(shè)置為他們想要使用的任何主題。

如果沒有設(shè)置任何類，它將添加.default類。如果將其設(shè)置為primary，則會添加.primary類。

使用計算屬性來簡化類

最終，模板中的表達式將變得過于復(fù)雜，并將開始變得非?；靵y和難以理解。幸運的是，我們有一個簡單的解決方案，就是使用計算民屬性：

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

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

這不僅易于閱讀，而且還可以輕松添加新功能并在將來進行重構(gòu)。

以上是“Vue中如何動態(tài)添加類名”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：Vue中如何動態(tài)添加類名-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article42/dcogec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、外貿(mào)建站、網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容