小技巧
2021-05-30
2021-05-30
在快乐时,朋友会认识我们;在患难时,我们会认识朋友。——柯林斯
我们在进行vue
开发的时候
有时会有根据条件给标签进行不同的class
配置
我们都知道可以使用:class
实现动态配置
但如果我们本身需要一些固定的样式,一般是在:class
中判断的时候加上
例如我这里写一个div
标签,加了少许样式
1 | <script> |
我们这里使用了模板字符串去做
1 | <div :class="`big ${additionalClass}`">这是一个新的div</div> |
但其实,我们的:class
和class
可以并存
直接简单写成这样
1 | <div class="big" :class="additionalClass">这是一个新的div</div> |
效果都是一样的,我们的class
会自动叠加到后面并为我们拼好空格
根据实验,style
标签也是可以叠加的
1 | <div class="big" :class="additionalClass" style="width: 200px;" :style="additionalStyle">这是一个新的div</div> |
1 | data() { |
但其他的一些不能叠加的则是后面的覆盖前面
例如这里的type
覆盖了前面的:type
,input
框变成了password
框
如果我们换个位置,把:type
放在后面,又会变成text
框
1 | <el-input :type="'text'" type="password" v-model="user.name"></el-input> |