控制外层盒子显示隐藏并改变内部图片src，会先显示上一张图再切换

Posted 2021-03-26 223zzm

<div class="cart" v-show="cart">
    <div class="cart-content">
        <img :src="imgUrl" />
    </div>
</div>

//显示并切换卡片内容
showcart(i) {
　　 //解决不了问题
　　 //this.imgUrl = ‘‘;
    this.imgUrl = this.url[i];
    this.cart = true;
},
//隐藏卡片
closeCard(){
    this.cart = false;
},

以上是问题代码

1. 使用v-if，不用v-show，带来频繁的切换消耗

2. 隐藏卡片后清空imgUrl

closeCard(){
　　this.card = false;
　　this.imgUrl = ‘‘;        
}

3. 使用多张卡片(建议)