<ul class="msg">
<li v-for="(item,index) in msg" :key="index" :style="item.icon">
<p>{{item.name}}</p>
<div>{{item.num}}<span style="font-size:30px">{{item.unit}}</span></div>
</li>
</ul>
data(){
return{
msg: [{
'name': "OEE",
'num': 72.9,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_01.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': ''
}, {
'name': "氧气浓度",
'num': 93,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_02.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': '%'
}, {
'name': "喷淋链速",
'num': 1.1,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_03.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': 'Mpa'
}, {
'name': "喷淋刀电机频率",
'num': 50,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_04.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': 'HZ'
},{
'name': "网带速",
'num': 3.5,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_05.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': 'M/s'
},
{
'name': "氮气浓度",
'num':99.9,
'icon': {
backgroundImage:
"url(" + require("./assets/img/LightBox/eq_06.png") + ")",
backgroundRepeat: "no-repeat",
backgroundSize: "cotain"
},
'unit': '%'
}],
}
}
<!--重点代码-->
backgroundImage:"url(" + require("./assets/img/LightBox/eq_02.png") + ")",
:style="item.icon"复制代码
vue中循环给几个模块渲染背景图
最新推荐文章于 2024-07-04 15:23:33 发布