Vue动态绑定dom元素的样式(背景颜色,字体颜色)(嵌套了三元表达式)

在项目开发时,许多情况下,dom元素的样式不是一成不变的,是需要根据接口返回的数据去进行动态显示的,在vue中,v-bind就很好的为我们解决了这一问题

显示效果:

1.图标样式能根据实时天气进行动态显示

代码:

注意!:在动态绑定图片的url地址时,需要将地址写在require中!!!

2.如果实时天气是“雨”,背景颜色为蓝色,否则为白色

代码:

3.空气质量:空气质量板块的背景颜色和字体颜色可以根据接口返回的空气指数动态渲染

代码(嵌套了三元表达式,其中item.aqinum为接口返回的空气指数):

页面最终显示样式:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值