带有背景图像的 V-FOR

Question

我正在尝试获取带有背景图像的 v-for 循环。我的意图是让每个列都包含不同的背景图像。这里有什么问题吗？ :( 另请注意照片，它是用道具导入的数组。这是一个组件模板。

<template>
  <div class="row">
    <div
      v-for="photo in photos"
      :key="photo"
      class="col-3"
      style="background-image: url({{photo.url}})"
    >
      Need to see photo here
    </div>
  </div>
</template>

<script>
export default {
  props: ["photos"],
};
</script>

Answer 1

参考Binding Inline Styles

    <div
      v-for="photo in photos"
      :key="photo"
      class="col-3"
      v-bind:style="{background-image:  'url(' + photo.url + ')'}"
    >
      Need to see photo here
    </div>

Answer 2

对于 v-bind:style

，我会使用带有 :style shorthand 的模板文字

<template>
  <div class="row">
    <div
      v-for="(photo, index) in photos"
      :key="index"
      class="col-3"
      :style="`background-image: url(${photo.url})`"
    >
      Need to see photo here
    </div>
  </div>
</template>

带有背景图像的 V-FOR

V-FOR with background images

vue.js

v-for

vue-props