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-tags？

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>

阻止Vue积极地重用dom元素

1 个答案: