vue中循环给几个模块渲染背景图

 <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"复制代码
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值