在html中有大量重复渲染的部分,怎样简洁地实现,比如我现在的代码中

`
<div class="no4 window">

                <span class="order">4</span>
                <img v-if="data4[12].value =='0(空位)' " src="../../assets/battery/cell_empty.png">
                <img v-else-if="80< showSoc4 && showSoc4 <95 " src="../../assets/battery/cell_high_power.png">
                <img v-else-if="50<= showSoc4 && showSoc4 <= 80 " src="../../assets/battery/cell_medium2_power.png">
                <img v-else-if="20< showSoc4 && showSoc4 < 50 " src="../../assets/battery/cell_medium1_power.png">
                <img v-else-if="data4[53].value != '%' && 0<=showSoc4 && showSoc4 <= 20 " src="../../assets/battery/low_energy.png">
                <img v-else-if="showSoc4 >=95 "  src="../../assets/battery/cell_full_power.png">
                <a-checkbox value="no4"   class="fix-checkbox"></a-checkbox>
              </div>
              <div class="no8 window">
                <span class="order">8</span>
                <img v-if="data8[12].value =='0(空位)' " src="../../assets/battery/cell_empty.png">
                <img v-else-if="80< showSoc8 && showSoc8 <95 " src="../../assets/battery/cell_high_power.png">
                <img v-else-if="50<= showSoc8 && showSoc8 <= 80 " src="../../assets/battery/cell_medium2_power.png">
                <img v-else-if="20< showSoc8 && showSoc8 < 50 " src="../../assets/battery/cell_medium1_power.png">
                <img v-else-if="data8[53].value != '%' && 0<=showSoc8 && showSoc8 <= 20 " src="../../assets/battery/low_energy.png">
                <img v-else-if="showSoc8 >=95 "  src="../../assets/battery/cell_full_power.png">
              </div>`
              

这种 .window 可能要重复渲染的,要在js中的话怎么实现呢

待解决 悬赏分:50 - 离问题结束还有 500天12小时31分42秒
反对 0举报 0 收藏 0

我来回答

回答4