如何在Vue中動態新增類名

2021-10-02 15:27:50 字數 3461 閱讀 3815

點讚再看,養成習慣

本文github上已經收錄,更多往期高讚文章的分類,也整理了很多我的文件,和教程資料。歡迎star和完善,大家面試可以參照考點複習,希望我們一起有點東西。

能夠向元件新增動態類名是非常強大的功能。它使我們可以更輕鬆地編寫自定義主題,根據元件的狀態新增類,還可以編寫依賴於樣式的元件的不同變體。

新增動態類名與在元件中新增 prop:class="classname"一樣簡單。無論classname的計算結果是什麼,都將是新增到元件中的類名。

在vue中,我們可以向元件新增靜態類和動態類。

靜態類是那些永遠不會改變的乏味類,它們將始終出現在元件中。另一方面,我們可以在應用程式中新增和刪除動態類。

新增靜態類與在常規html中所做的是完全相同的

this is how you add static classes in vue.

動態類非常類似,但是我們必須使用vue的特殊屬性語法v-bind,以便將 js 表示式繫結到我們的類:

this is how you add static classes in vue.

這裡你會注意到,我們必須在動態類名周圍新增額外的引號。

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

vue還有乙個v-bind的簡寫語法:

this is how you add static classes in vue.

真正奇妙的是,您甚至可以在同乙個元件上同時擁有靜態類和動態類。靜態類用於我們知道不會更改的內容,比如定位和布局,動態類用於主題之類的:

this is how you add static classes in vue.

export default ;

}};----------------------------------------

.blue-theme

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

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

this is how you add dynamic classes in vue.

如果darkmodetrue,則將dark-theme用作我們的類名。 否則,我們選擇light-theme

如果需要動態新增許多不同的類,可以使用陣列或物件。這兩種方法都很有用,我們先來看陣列方式。

因為我們只是在計算乙個 js 表示式,所以可以將我們剛剛學到的表示式與陣列語法結合起來

this is how you add dynamic classes in vue.

我們使用陣列在這個元素上設定兩個動態類名。fonttheme的值是乙個類名,它將改變字型的外觀。在前面的例子中,我們仍然可以使用darkmode變數在dark-themelight-theme之間切換。

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

對於任何值為真的鍵/值對,它將把鍵用作類名。讓我們看乙個物件語法的例子:

this is how you add dynamic classes in vue.

我們的物件包含兩個鍵:dark-themelight-theme。與我們之前實現的邏輯類似,我們希望基於darkmode的值在這些主題之間切換。

darkmodetrue時,會把dark-theme作為乙個動態類名應用於我們的元素。但是light-them不會被應用,因為!darkmode值為false

現在我們已經介紹了向vue元件動態新增類的基礎知識。那麼如何使用自己的自定義元件來做到這一點?

如果我們要動態新增乙個將更改主題的類,我們該怎麼辦?其實很簡單。

我們只需要像以前那樣新增:class屬性

之所以起作用,是因為vue直接在movielist的根元素上設定類。

在元件上設定props時,vue會將這些props與元件在其props部分中指定的props進行比較。 如果有匹配項,它將作為常規props傳遞。 否則,vue會將其新增到根dom元素中。

在這裡,由於movielist沒有指定class屬性,因此vue知道應該在根元素上進行設定。

不過,我們可以用動態類名做一些更高階的事情。

我們已經介紹了許多動態新增或刪除類名的不同方法。但是動態生成類名本身又如何呢?

假設有乙個button元件,它為所有不同型別的按鈕提供20種不同的css樣式。

你可能不想花一整天的時間把每一項都寫出來,也不想把開關的邏輯都寫出來。相反,我們將動態生成要應用的類的名稱。

this is how you add static classes in vue.

export default ;

}};.blue-theme

我們可以設定乙個變數來包含我們想要的任何類名的字串。如果我們想對button元件執行此操作,則可以執行以下簡單操作:

}

export default

}};.default {}

.primary {}

.danger {}

現在,使用button元件的任何人都可以將theme屬性設定為他們想要使用的任何主題。

如果沒有設定任何類,它將新增.default類。如果將其設定為primary,則會新增.primary類。

最終,模板中的表示式將變得過於複雜,並將開始變得非常混亂和難以理解。幸運的是,我們有乙個簡單的解決方案,就是使用計算民屬性:

export default

}};

這不僅易於閱讀,而且還可以輕鬆新增新功能並在將來進行重構。

**部署後可能存在的bug沒法實時知道,事後為了解決這些bug,花了大量的時間進行log 除錯,這邊順便給大家推薦乙個好用的bug監控工具 fundebug 。

原文:

如何在EXCEL SHEET中 動態新增控制項

excel sheet中如何新增下拉框或者 文字框,命令按鈕?下面的方法就可以 1 新建worksheet 2 開啟visiual basic編輯器 3 選擇sheet1 的worksheet selectionchange 事件 4 編寫 如下 private sub worksheet sele...

如何在EXCEL SHEET中 動態新增控制項

excel sheet中如何新增下拉框或者 文字框,命令按鈕?下面的方法就可以 1 新建worksheet 2 開啟visiual basic編輯器 3 選擇sheet1 的worksheet selectionchange 事件 4 編寫 如下 private sub worksheet sele...

如何在水晶報表中動態新增字段

問題 水晶報表中,因為資料來源的字段是不固定的,可否在執行時動態新增字段,就象在winform中動態新增控制項一樣?更新 2003 11 05 解決方案 用 公式字段 1 根據欄位的最大數量,定義若干個 公式字段 formulafeild1 formulafeild2 公式為空 2 把 公式字段 按...