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

迪士尼在逃程序丸

已于 2024-03-01 14:38:23 修改

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 css3 vue.js

于 2024-03-01 11:42:13 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73571867/article/details/136391537

文章描述了一个使用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    
    },

效果呈现