詳解如何在Vue中動(dòng)態(tài)添加類(lèi)名
能夠向組件添加動(dòng)態(tài)類(lèi)名是非常強(qiáng)大的功能。它使我們可以更輕松地編寫(xiě)自定義主題,根據(jù)組件的狀態(tài)添加類(lèi),還可以編寫(xiě)依賴于樣式的組件的不同變體。
添加動(dòng)態(tài)類(lèi)名與在組件中添加 prop :class="classname"一樣簡(jiǎn)單。無(wú)論classname的計(jì)算結(jié)果是什么,都將是添加到組件中的類(lèi)名。
當(dāng)然,對(duì)于Vue中的動(dòng)態(tài)類(lèi),我們可以做的還有很多。在本文中,我們將討論很多內(nèi)容:
- 在 Vue 中使用靜態(tài)和動(dòng)態(tài)類(lèi)
- 如何使用常規(guī)的 JS 表達(dá)式來(lái)計(jì)算我們的類(lèi)
- 動(dòng)態(tài)類(lèi)名的數(shù)組語(yǔ)法
- 對(duì)象語(yǔ)法
- 快速生成類(lèi)名
- 如何在自定義組件上使用動(dòng)態(tài)類(lèi)名
靜態(tài)和動(dòng)態(tài)類(lèi)
在Vue中,我們可以向組件添加靜態(tài)類(lèi)和動(dòng)態(tài)類(lèi)。
靜態(tài)類(lèi)是那些永遠(yuǎn)不會(huì)改變的乏味類(lèi),它們將始終出現(xiàn)在組件中。另一方面,我們可以在應(yīng)用程序中添加和刪除動(dòng)態(tài)類(lèi)。
添加靜態(tài)類(lèi)與在常規(guī)HTML中所做的是完全相同的
<template> <span class="description"> This is how you add static classes in Vue. </span> </template>
動(dòng)態(tài)類(lèi)非常類(lèi)似,但是我們必須使用Vue的特殊屬性語(yǔ)法v-bind,以便將 JS 表達(dá)式綁定到我們的類(lèi):
<template> <span v-bind:class="'description'"> This is how you add static classes in Vue. </span> </template>
這里你會(huì)注意到,我們必須在動(dòng)態(tài)類(lèi)名周?chē)砑宇~外的引號(hào)。
這是因?yàn)関-bind語(yǔ)法接受我們作為 JS 值傳遞的任何內(nèi)容。添加引號(hào)可以確保Vue將其視為字符串。
Vue還有一個(gè)v-bind的簡(jiǎn)寫(xiě)語(yǔ)法:
<template> <span :class="'description'"> This is how you add static classes in Vue. </span> </template>
真正奇妙的是,您甚至可以在同一個(gè)組件上同時(shí)擁有靜態(tài)類(lèi)和動(dòng)態(tài)類(lèi)。靜態(tài)類(lèi)用于我們知道不會(huì)更改的內(nèi)容,比如定位和布局,動(dòng)態(tài)類(lèi)用于主題之類(lè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)用的類(lèi)名的變量。
有條件的類(lèi)名
由于v-bind可以接受任何 JS 表達(dá)式,因此我們可以用它做一些非??岬氖虑椤N易钕矚g的是在模板中使用三元表達(dá)式,它往往是非常干凈和可讀的。
<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用作我們的類(lèi)名。否則,我們選擇light-theme。
使用數(shù)組語(yǔ)法
如果需要?jiǎng)討B(tài)添加許多不同的類(lèi),可以使用數(shù)組或?qū)ο?。這兩種方法都很有用,我們先來(lái)看數(shù)組方式。
因?yàn)槲覀冎皇窃谟?jì)算一個(gè) JS 表達(dá)式,所以可以將我們剛剛學(xué)到的表達(dá)式與數(shù)組語(yǔ)法結(jié)合起來(lái)
<template> <span class="description" :class="[ fontTheme, darkMode ? 'dark-theme' : 'light-theme', ]" > This is how you add dynamic classes in Vue. </span> </template>
我們使用數(shù)組在這個(gè)元素上設(shè)置兩個(gè)動(dòng)態(tài)類(lèi)名。fontTheme的值是一個(gè)類(lèi)名,它將改變字體的外觀。在前面的例子中,我們?nèi)匀豢梢允褂胐arkMode變量在dark-theme和light-theme之間切換。
使用對(duì)象語(yǔ)法
我們甚至可以使用對(duì)象來(lái)定義動(dòng)態(tài)類(lèi)的列表,這給了我們更多的靈活性。
對(duì)于任何值為真的鍵/值對(duì),它將把鍵用作類(lèi)名。讓我們看一個(gè)對(duì)象語(yǔ)法的例子:
<template> <span class="description" :class="{ 'dark-theme': darkMode, 'light-theme': !darkMode, ]" > This is how you add dynamic classes in Vue. </span> </template>
我們的對(duì)象包含兩個(gè)鍵:dark-theme和light-theme。與我們之前實(shí)現(xiàn)的邏輯類(lèi)似,我們希望基于darkMode的值在這些主題之間切換。
當(dāng)darkMode為 true 時(shí),會(huì)把dark-theme作為一個(gè)動(dòng)態(tài)類(lèi)名應(yīng)用于我們的元素。但是light-them不會(huì)被應(yīng)用,因?yàn)?darkMode 值為false。
現(xiàn)在我們已經(jīng)介紹了向Vue組件動(dòng)態(tài)添加類(lèi)的基礎(chǔ)知識(shí)。那么如何使用自己的自定義組件來(lái)做到這一點(diǎn)?
與自定義組件一起使用
假設(shè)我們?cè)?app 中有一個(gè)自定義組件
<template> <MovieList :movies="movies" :genre="genre" /> </template>
如果我們要?jiǎng)討B(tài)添加一個(gè)將更改主題的類(lèi),我們?cè)撛趺崔k?其實(shí)很簡(jiǎn)單。
我們只需要像以前那樣添加:class屬性
<template> <MovieList :movies="movies" :genre="genre" :class="darkMode ? 'dark-theme' : 'light-theme'" /> </template>
之所以起作用,是因?yàn)閂ue直接在MovieList的根元素上設(shè)置類(lèi)。
在組件上設(shè)置props時(shí),Vue會(huì)將這些props與組件在其props部分中指定的props進(jìn)行比較。如果有匹配項(xiàng),它將作為常規(guī)props傳遞。否則,Vue會(huì)將其添加到根DOM元素中。
在這里,由于MovieList沒(méi)有指定class屬性,因此Vue知道應(yīng)該在根元素上進(jìn)行設(shè)置。
不過(guò),我們可以用動(dòng)態(tài)類(lèi)名做一些更高級(jí)的事情。
快速生成類(lèi)名
我們已經(jīng)介紹了許多動(dòng)態(tài)添加或刪除類(lèi)名的不同方法。但是動(dòng)態(tài)生成類(lèi)名本身又如何呢?
假設(shè)有一個(gè)Button組件,它為所有不同類(lèi)型的按鈕提供20種不同的CSS樣式。
你可能不想花一整天的時(shí)間把每一項(xiàng)都寫(xiě)出來(lái),也不想把開(kāi)關(guān)的邏輯都寫(xiě)出來(lái)。相反,我們將動(dòng)態(tài)生成要應(yīng)用的類(lè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; }
我們可以設(shè)置一個(gè)變量來(lái)包含我們想要的任何類(lèi)名的字符串。如果我們想對(duì)Button組件執(zhí)行此操作,則可以執(zhí)行以下簡(jiǎn)單操作:
<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è)置為他們想要使用的任何主題。
如果沒(méi)有設(shè)置任何類(lèi),它將添加.default類(lèi)。如果將其設(shè)置為primary,則會(huì)添加.primary類(lèi)。
使用計(jì)算屬性來(lái)簡(jiǎn)化類(lèi)
最終,模板中的表達(dá)式將變得過(guò)于復(fù)雜,并將開(kāi)始變得非常混亂和難以理解。幸運(yùn)的是,我們有一個(gè)簡(jiǎn)單的解決方案,就是使用計(jì)算民屬性:
<template> <MovieList :movies="movies" :genre="genre" :class="class" /> </template> export default { computed: { class() { return darkMode ? 'dark-theme' : 'light-theme'; } } };
這不僅易于閱讀,而且還可以輕松添加新功能并在將來(lái)進(jìn)行重構(gòu)。
到此這篇關(guān)于詳解如何在Vue中動(dòng)態(tài)添加類(lèi)名的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)添加類(lèi)名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- VUE中如何動(dòng)態(tài)綁定類(lèi)名和樣式
- vue動(dòng)態(tài)綁定多個(gè)類(lèi)名方法詳解(:class動(dòng)態(tài)綁定多個(gè)類(lèi)名)
- vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類(lèi)名、樣式
- vue類(lèi)名如何獲取動(dòng)態(tài)生成的元素
- vue中動(dòng)態(tài)添加class類(lèi)名的方法
- Vue2.0點(diǎn)擊切換類(lèi)名改變樣式的方法
- 微信小程序如何像vue一樣在動(dòng)態(tài)綁定類(lèi)名
- vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類(lèi)名
相關(guān)文章
vue增加強(qiáng)緩存和版本號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue增加強(qiáng)緩存和版本號(hào)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的示例
本文主要介紹了Vue基于路由監(jiān)聽(tīng)實(shí)現(xiàn)同頁(yè)面動(dòng)態(tài)加載的示例,重點(diǎn)在于切換路由的時(shí)候,重新拉取列表數(shù)據(jù),接下來(lái)看看實(shí)現(xiàn)方法吧2021-05-05vue ElementUI實(shí)現(xiàn)異步加載樹(shù)
這篇文章主要為大家詳細(xì)介紹了vue ElementUI實(shí)現(xiàn)異步加載樹(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06