在快乐时，朋友会认识我们；在患难时，我们会认识朋友。------柯林斯

我们在进行vue开发的时候

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

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

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

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

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

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

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

但其实，我们的:class和class可以并存

直接简单写成这样

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

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

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

|-----------|--------------------------------------------------------------------------------------------------------------------------| | 1 | hljs vue <div class="big" :class="additionalClass" style="width: 200px;" :style="additionalStyle">这是一个新的div</div> |

|---------------------|-------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | hljs vue data() { return { additionalClass: 'red', additionalStyle: 'opacity: 0.5;' }; } |

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

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

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

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