Question

Condider下面的代码片断：

 <template v-if="tryIsMobile" > 
      <div class='device device-mobile-portrait' :class="deviceClass"> 
      <div class="device-scroller-container"> 
       <div class='device-scroller'> 
       <img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/> 
       </div> 
      </div> 
      </div> 
     </template> 

     <template v-else> 
      <div class='device device-tablet-landscape' :class="deviceClass" > 
      <div class="device-scroller-container"> 
       <div class='device-scroller'> 
       <img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/> 
       </div> 
      </div> 
      </div> 
     </template> 

此代码有条件地使所述两个图像中的一个。某些用户操作会导致实际显示的图像被切换。

我看到的是以下内容：当从说，tryit-img-mobile切换到tryit-img-tablet时，作为tryit-img-mobile的一部分加载的图像将立即以不同的尺寸显示。但是，在图像加载期间，它是新来源:src="srcUrlTablet"，仍然显示带有src :src="srcUrlMobile"的图像。

这可能是由于Vue对两个模板使用相同的img-tag。我如何防止Vue做到这一点，而是使用单独的img标签？

Answer 1

在这种情况下，Vue使用特殊的key属性，告诉它不要重复使用相同的元素。给每个元件都具有独特的价值这个属性，而Vue公司将不再重复使用相同的元素：

<div v-if="tryIsMobile" 
    class="device device-mobile-portrait" 
    :class="deviceClass" 
    key="mobile" 
> 
    ... 
</div> 
<div v-else 
    class="device device-tablet-landscape" 
    :class="deviceClass" 
    key="tablet" 
> 
    ... 
</div>