css动态行内样式实现

在Vue.js应用中,可以通过数据绑定来实现视图元素的动态样式改变。例如,根据`approveCard.status`的值动态设置字体颜色。在给定的代码段中,`statusColor`是决定字体颜色的数据属性,`<view>`标签的样式直接与该属性关联。这使得当`approveCard.status`的值变化时,字体颜色也随之更新。
摘要由CSDN通过智能技术生成

场景:不同值显示的字体颜色不同
需要动态修改字体颜色,示例代码如下:

<view :style="{ color: statusColor, 'margin-top': 40 + '%;margin-left: 8px;' }">
	{{approveCard.status}}
</view>
data() {
	return {
		statusColor: this.approveCard.statusColor,
		status: this.approveCard.status,
	};
},

效果如下图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值