在项目开发时,许多情况下,dom元素的样式不是一成不变的,是需要根据接口返回的数据去进行动态显示的,在vue中,v-bind就很好的为我们解决了这一问题
显示效果:
1.图标样式能根据实时天气进行动态显示
代码:
注意!:在动态绑定图片的url地址时,需要将地址写在require中!!!
2.如果实时天气是“雨”,背景颜色为蓝色,否则为白色
代码:
3.空气质量:空气质量板块的背景颜色和字体颜色可以根据接口返回的空气指数动态渲染
代码(嵌套了三元表达式,其中item.aqinum为接口返回的空气指数):
页面最终显示样式: