Javascript 如何对随机添加的图像放置不同的位置？Vue.js

我有这样一个：每秒钟，所有图像都会移动到相同的随机位置

但是我想要这个：每一秒，我都会在不同的位置有一个新的图像

JavaScript:

HTML:

---

问题是您的图像绑定到同一个计算的

imgStyle

，这将所有绑定图像的位置设置为相同的坐标

要使位置唯一，每个

addImage[]

项应包含其自己的位置：

this.addImage.push({
  style: {
    top: `${this.imgTop}px`,
    left: `${this.imgLeft}px`,
    height: `${this.imgHeight}px`,
    width: `${this.imgWidth}px`
  },
  src: this.selectedImage
})

这将需要更新模板以绑定到每个迭代器项的子属性：

<img :style="imgStyle" class="image" :key="id" :src="image" v-for=" (image,id) in addedImage">

this.addImage.push({
  style: {
    top: `${this.imgTop}px`,
    left: `${this.imgLeft}px`,
    height: `${this.imgHeight}px`,
    width: `${this.imgWidth}px`
  },
  src: this.selectedImage
})