使用vue动态修改css样式
今天完成需求时遇到了需要动态修改style样式的场景:
之前采用了三目运算符判断采取不同class样式,使用嵌入式设置style样式
:class="buttonstate === false?'colorNone':'colorFocus'"
如上,在vue中使用:(v-bind)响应式更新class。
但今天出于懒惰的原因,打算用内联直接更改style样式
:style="'width:'+ x * 100 +'%;color:#ffffff;'"
同样使用v-bind,使用单引号引用字段定值,并利用加号+与变量x拼接,不同样式之间使用分号;分割。
在查找解决办法时,也发现了另一种引用方式,通过对象的方式
:style="{'color':txtcolor,'float':'left','margin-top':'-18px','margin-left':'300px'}"
使用v-bind动态绑定style,将style整体通过引号与大括号{}引用,每一个属性值通过引号引用,变量不需要加引号,不同样式之间通过逗号分割。
如果样式不加引号,需要去除margin-top的横线变为marginTop
:style="{color:txtcolor,float:'left',marginTop:'-18px',marginLeft:'300px'}"
由于本次应用样式部分动态部分静态,所以不太方便直接通过三目运算符操作
:style="{color:(index==0?conFontColor:'#000')}"
如果只有单一样式也可以通过最初的方式判断更改。
标签:
CSS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)