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

Neoo1984
  • 53

`
<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中的话怎么实现呢

回复
阅读 1.5k
4 个回答

computed了解一下

v-bind 绑定img的src属性,computed定义一个变量,根据showSoc4值返回的是src的图片路径

dwent
  • 3
新手上路,请多包涵

想到一个思路,把每张图片注册组件,用动态组件的方法进行切换

<component :is="compName"></component>

判断分数放在computed

export default{
    data(){
        return {
            score: 0,
            scoreLine: [
                { score: 20, name: 'img-lower' },
                { score: 40, name: 'img-low' },
                { score: 60, name: 'img-middle' }
            ]
        }
    },
    computed: {
        compName(){// 动态组件名
            let _name = '';
            // 筛选出分数段的组件
            this.scoreLine.some((item, index) => {
                if(this.score <= item.score){
                    _name = item.name;
                    return true;
                }
            })
        }
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏