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-tags？
@H_502_10@解决方法
在这种情况下,Vue使用一个特殊的键属性来告诉它不要重用相同的元素.为每个元素赋予此属性一个唯一值,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>
@H_502_10@
@H_502_10@ 原文链接：https://www.f2er.com/js/157521.html