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.多个动态类名用数组或者对象表示
可以直接将需要的动态类名写进数组里,对象形式的话,可以通过开关真/假来控制动态添加需要控制的样式