【CSS】class動態類名的書寫


1.正常html里,一個標簽無法同時寫兩個 class,只有位置靠前的第一個class類名生效


我們只能用將不同類名寫入標簽的class屬性並用空格隔開



---

2.vue允許 ★靜態類名staticClass + 動態類名dynamicClass

這里類名加不加單引號,要看你綁定時是否為字符串。如果是字符串,動態類么的書寫無需額外在加單引號。自己測試
<div class="staticClass" v-bind:class="dynamicClass"><div />
簡寫: <div class="staticClass" :class="'dynamicClass'"><div />



---

3.動態類名寫作js表達式(推薦三元運算符)

如果條件condition為真,則使用動態類dynamicClass,若條件condition為假,則使用默認類defaultClass
<div :class=" condition ? 'dynamicClass' : 'defaultClass' "><div />



---

4.多個動態類名用數組或者對象表示

可以直接將需要的動態類名寫進數組里,對象形式的話,可以通過開關真/假來控制動態添加需要控制的樣式



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM