使用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')}" 

  如果只有单一样式也可以通过最初的方式判断更改。

 

posted @   霏霜  阅读(5605)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示