时间戳

首页 > 解决方案 > 如何在 Vue JS 中插入 dom 元素？

vue.js - 如何在 Vue JS 中插入 dom 元素？

问题描述

我有 vue JS 文件，在其中，我使用“v-for”显示图像。检查下面的代码

    <div id="peopleimages">
          <img
            :src="item.thumbnailLink"
            v-bind:id="'profile'+item.id"
            v-masonry-tile
            class="item"
            v-for="(item, index) in images"
            :key="index"
          />
    </div>

上面的代码将显示从服务器获取的图像列表。

现在，我想明确插入一张图片作为第一张图片。之后，应填充图像列表。

我尝试使用 Java 脚本，但事实证明，我无法在 vue js 文件中插入标签。

如何在开头明确插入图像？

谢谢！

标签： vue.jsvue-component

解决方案

最简单的方法是将另一个图像插入images数组的开头：

const newImage = {
    thumbnailLink: "path-to-new-image",
    id: "unique-id"
}

this.images.unshift(newImage);

请记住，如果您使用 index 作为，当您更改元素顺序时:key，它可能会导致一些不需要的行为。

另一种方法是创建一个不属于图像数组的数据，并有条件地在模板上显示它

<div id="peopleimages">
      <img
        v-if="firstImage"
        :src="firstImage"
        class="item" />
      <img
        :src="item.thumbnailLink"
        v-bind:id="'profile'+item.id"
        v-masonry-tile
        class="item"
        v-for="(item, index) in images"
        :key="index"
      />
</div>

并在脚本上

data() {
    return {
        firstImage: ""   
    }
},

methods: {
    setFirstImage() {
        this.firstImage = "path-to-first-image"
    }
}

推荐阅读