动态生成的div,给每个div添加指定的不同背景图片

文章描述了一个使用Vue.js实现的动态内容社区中,展示IT设备能耗数据(如岸桥、门机等)的组件,包括图像、总作业量、能耗指标和类型切换功能。组件还展示了如何加载背景图片和处理按钮点击事件以更新数据显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  <div class="three" v-show="showfirst">
          <div
            v-for="(item, index) in allitem"
            :key="index"
            class="childboxItem"
            ref="childitem"
          >
            <div
              class="itembg"
              :style="{
                'background-image': 'url(' + loadImg(item.imageurl) + ')',
                'background-repeat': 'no-repeat',
                'background-size': '84% 80%',
                'background-position': 'center',
              }"
            >
              <div class="childbox">
                <div class="btnbox">
                  <div v-if="index >= 3 && index <= 6">
                    <span
                      v-for="(btn, j) in ['电', '油']"
                      style="margin-right: 8px"
                      :key="j"
                      :class="{ active: item.type === j }"
                      @click="nxbtn(j, btn, item)"
                      >{{ btn }}</span
                    >
                  </div>
                </div>
                <p
                  @click="monchart(`${item.imageurl}`)"
                  style="cursor: pointer"
                >
                  {{ item.titlemon }}
                </p>
                <p v-if="item.totalpower != ''">
                  总作业量: <span>{{ item.totalpower }}</span
                  ><span>TEU</span>
                </p>
                <p v-if="item.totalpower != ''">
                  总用电量: <span>{{ item.scpower }}</span
                  ><span>KWH</span>
                </p>
                <p v-if="item.totalpower != ''">
                  能耗总量: <span>{{ item.scpower }}</span
                  ><span>KECG</span>
                </p>
                <p v-if="item.totalpower != ''">
                  平均单耗: <span>{{ item.fscpower }}</span
                  ><span>KWH/万TEU</span>
                </p>
                <div v-else>
                  <p
                    style="
                      text-align: center;
                      font-size: 40px;
                      line-height: 132px;
                      letter-spacing: 2px;
                      margin-left: 16px;
                      color: rgb(126, 124, 132);
                    "
                  >
                    暂无数据
                  </p>
                </div>
              </div>
            </div>

            <!-- 暂无数据 -->
          </div>
        </div>

这是data中的v-for渲染div数据
allitem: [
        {
          titlemon: '岸桥(8台)',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/aqbg.png'
        },
        {
          titlemon: '门机(8台)',
          totalpower: '',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/mjbg.png'
        },
        {
          titlemon: '场桥(19台)',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/cqbg.png',
        },
        {
          titlemon: '堆高机(10台)',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/dgj.png',
          type: 0,
        },
        {
          titlemon: '正面吊(8台)',
          totalpower: '',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/zmd.png',
          type: 0,
        },
        {
          titlemon: '集卡(47辆)',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/jk.png',
          type: 0,
        },
        {
          titlemon: '叉车(15辆)',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/chache.png',
          type: 0,
        },
        {
          titlemon: '其他',
          totalpower: '12311',
          scpower: '1233',
          fscpower: '1124',
          imageurl: '/qita.png'
        }

      ],

调用背景图片的方法
 loadImg(img) {
      return require(`../../imgs${img}`)
    },
油电 按钮点击展示对应数据 及 高亮背景色
  nxbtn(j, btn, item) {
      item.type = j
      // if (btn) return    
    },

效果呈现

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值