遍历出来的结构，动态绑定类名，实现不同的背景图片

最新推荐文章于 2024-05-08 14:29:47 发布

最冷一天.

最新推荐文章于 2024-05-08 14:29:47 发布

阅读量377

点赞数 12

分类专栏： Vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_61603704/article/details/135559131

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

dom结构

   <div
        class="list-item"
        v-for="(item, index) in infoList"
        :key="index"
        :class="bgImg[item.status]"
      >
        <div class="num">{{ item.num }}</div>
        <!-- A枪 B枪 -->
        <div class="gun" v-for="(k, kIndex) in item.arr" :key="kIndex">
          <div class="title">{{ k.name }}</div>
          <div class="gun-info">
            <div class="info-item">
              <div class="info-label">枪状态</div>
              <div class="info-value">
                <span :class="textColor[k.status]"
                  >{{ getStatus(k.status) }}
                </span>
              </div>
            </div>
            
          </div>
        </div>
      </div>

data

 bgImg: ['', 'bg-img1', 'bg-img2', 'bg-img3', 'bg-img4'],

css

.bg-img1 {
  background: url('../../assets/images/status1.png') no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-img2 {
  background: url('../../assets/images/status2.png') no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-img3 {
  background: url('../../assets/images/status3.png') no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-img4 {
  background: url('../../assets/images/status4.png') no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
}

.textColor1 {
  color: #9d6dff;
}
.textColor2 {
  color: #e80909;
}
.textColor3 {
  color: #13be48;
}
.textColor4 {
  color: #888888;
}