在快乐时,朋友会认识我们;在患难时,我们会认识朋友。——柯林斯

我们在进行vue开发的时候

有时会有根据条件给标签进行不同的class配置

我们都知道可以使用:class实现动态配置

但如果我们本身需要一些固定的样式,一般是在:class中判断的时候加上

例如我这里写一个div标签,加了少许样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
export default {
data() {
return {
additionalClass: 'red'
};
}
};
</script>
<style scoped="scoped">
.red{
background: red;
}
.big{
height: 200px;
}
</style>

我们这里使用了模板字符串去做

1
<div :class="`big ${additionalClass}`">这是一个新的div</div>

但其实,我们的:classclass可以并存

直接简单写成这样

1
<div class="big" :class="additionalClass">这是一个新的div</div>

效果都是一样的,我们的class会自动叠加到后面并为我们拼好空格

image-20210530232854329

根据实验,style标签也是可以叠加的

1
<div class="big" :class="additionalClass" style="width: 200px;" :style="additionalStyle">这是一个新的div</div>
1
2
3
4
5
6
data() {
return {
additionalClass: 'red',
additionalStyle: 'opacity: 0.5;'
};
}

image-20210530233219944

但其他的一些不能叠加的则是后面的覆盖前面

例如这里的type覆盖了前面的:typeinput框变成了password

如果我们换个位置,把:type放在后面,又会变成text

1
<el-input :type="'text'" type="password"  v-model="user.name"></el-input>