vue 动态渲染style

:style="getMembertemporaryStatus(status)"


方法:
    getMembertemporaryStatus(status) { 
      if (status) {
        return 'background:#f5ccff'
      }
      return ''
    },

第二种:

文章:https://www.cnblogs.com/lpp-11-15/p/13163492.html

<el-input
      v-model="itemLabel.oldValue" class="borderNone"
      :style="{width:(label.flag == 'basePerson'?'40%':'100%'),color:'#8b8b8b'}"
      readonly
></el-input>

 

Vue中,可以使用动态渲染style来为HTML元素绑定内联样式。通过使用绑定对象的方式,可以根据data对象中定义的属性值来动态改变样式。例如,可以使用`:style`指令来将属性值绑定到HTML元素的style属性上。 举个例子,如果在data函数中定义了属性`activeColor`和`fontSize`,可以通过`:style`指令将这些属性与HTML元素的style属性绑定起来,实现动态渲染样式。例如,可以这样写: ``` data() { return { activeColor: 'red', fontSize: 30 } } ``` 然后,在HTML模板中,可以将`:style`指令与一个JavaScript对象作为参数,对象的属性名对应CSS属性,属性值对应CSS属性值。例如: ```html <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> ``` 在这个例子中,`activeColor`属性值将被应用到`color`属性上,`fontSize`属性值将被应用到`fontSize`属性上,单位为像素。这样,在Vue实例的数据发生变化时,样式也会相应地动态改变。 总结起来,Vue动态渲染style的方法是使用`:style`指令,将属性值绑定到HTML元素的style属性上,通过一个JavaScript对象来定义样式属性和值的对应关系。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vue3】数据绑定,动态渲染class与style](https://blog.youkuaiyun.com/weixin_43361722/article/details/129824418)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我先来一碗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值