在 Vue Js 的 for 循环中为每个 div 提供随机背景图像

Question

我有一个 v-for 循环，它在 div 上运行并给出一堆标签。我需要这些标签中的每一个都有不同的 src。到目前为止，我所尝试的一切都会导致所有标签都获得相同的来源。有什么办法可以做到这一点吗？

<div class="wrapper" v-for="result in results" :key="result.index">
         <div class='small-card'>
            <img class="thumbnail" :src="backgroundImage">
            <div class="text-elements">
               <span class="md-display-2 minicard-title">{{result.name}}</span>
               <br class="break">
               <span class="md-display-1 minicard-subtitle">{{result.state}}</span>
            </div>
         </div>
         <br class="br3">
      </div>

Answer 1

我最近在一个项目中做了这个。

我最后做的是使用 :style 属性为 background-image 设置样式标签。

根据您获取图像源的方式，您需要创建一个方法来 return 随机图像 URL，或者访问 URL 中提供的图像目的。正如你所说的“随机”，我认为第一种方法是最合适的。

这是一个非常粗糙且未经测试的示例：

<template>
  <div>
    <div
      v-for="index in 10"
      :key="index"
      :style="{'background-image': randomImage()}"
    />
  </div>
</template>

<script>
export default {
  name: 'Example',
  data() {
    return {
      images: ['1.jpg', '2.jpg', '3.jpg', '4.jpg'],
    };
  },
  methods: {
    randomImage() {
      return `url("${
        this.images[Math.floor(Math.random() * this.images.length)]
      }")`;
    },
  },
};
</script>

确保 :style="{'background-image': randomImage()}" 包含 () 以确保方法被调用与被引用。

在 Vue Js 的 for 循环中为每个 div 提供随机背景图像

Giving random background images to each div in the for loop in Vue Js

javascript

vue.js

vuejs2

background-image