vue中:class的小技巧
在快乐时，朋友会认识我们；在患难时，我们会认识朋友。——柯林斯
我们在进行vue开发的时候
有时会有根据条件给标签进行不同的class配置
我们都知道可以使用:class实现动态配置
但如果我们本身需要一些固定的样式，一般是在:class中判断的时候加上
例如我这里写一个div标签，加了少许样式
<script>
export default {
data() {
return {
additionalClass: 'red'
};
}
};
</script>
<style scoped="scoped">
.red{
background: red;
}
.big{
height: 200px;
}
</style>我们这里使用了模板字符串去做
<div :class="`big ${additionalClass}`">这是一个新的div</div>但其实，我们的:class和class可以并存
直接简单写成这样
<div class="big" :class="additionalClass">这是一个新的div</div>效果都是一样的，我们的class会自动叠加到后面并为我们拼好空格
根据实验，style标签也是可以叠加的
<div class="big" :class="additionalClass" style="width: 200px;" :style="additionalStyle">这是一个新的div</div>data() {
return {
additionalClass: 'red',
additionalStyle: 'opacity: 0.5;'
};
}
但其他的一些不能叠加的则是后面的覆盖前面
例如这里的type覆盖了前面的:type，input框变成了password框
如果我们换个位置，把:type放在后面，又会变成text框
<el-input :type="'text'" type="password" v-model="user.name"></el-input>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
