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

565 阅读1分钟
 <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"