vue动态修改样式的方式
注意:固定样式单独写在一个class中,选择的class写在一起,选出的class会和固定class合并共存
例如:
<div class="static" v-bind:class="{ 'text-danger':hasError }"></div>
会渲染为:
<div class="static text-danger"></div>
一,多个样式共同生效
1,class绑定对象
直接写进class
<div class="static" v-bind:class="{ 'text-danger':true,'word-danger':false }"></div>
对象写在data
<div class="static" v-bind:class="obj"></div>
data:{
obj:{ 'text-danger':true,'word-danger':false }
}
2,class绑定数组
<div v-bind:class="['active', 'text-danger']"></div>
两个样式仍旧可以共存
注意:数组项可以使用三元表达式选择class,也可以使用对象作为数组项
二,绑定内联样式style
<div v-bind:style="[baseStyles, styleObject]"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
},
baseStyles:{
color: 'red',
fontSize: '13px'
}
}
业精于勤,荒于嬉,行成于思,毁于随~
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步