【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