在 Vue Js 的 for 循环中为每个 div 提供随机背景图像
Giving random background images to each div in the for loop in Vue Js
我有一个 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>
我最近在一个项目中做了这个。
我最后做的是使用 :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()}"
包含 ()
以确保方法被调用与被引用。
我有一个 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>
我最近在一个项目中做了这个。
我最后做的是使用 :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()}"
包含 ()
以确保方法被调用与被引用。