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;
}
实现效果
根据动态数据返回的状态,显示背景图片和文字颜色