Vue 关于如何使用 background-image 属性（真的很详细）

在Vue中，你可以通过绑定样式(style)或者类(class)来使用background-image属性。

绑定内联样式(style)

<template>
  <div :style="{ backgroundImage: 'url(' + imageUrl + ')' }">
    <!-- 内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg'
    }
  }
}
</script>

绑定计算的类(class)

如果你想要通过类来设置背景图片，你可以在组件的computed属性中返回一个对象，表示不同的类和对应的布尔值，代表是否应用该类。

<template>
  <div :class="{'background-image-class': hasBackgroundImage}">
    <!-- 内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      hasBackgroundImage: true
    }
  },
  computed: {
    backgroundStyle() {
      if (this.hasBackgroundImage) {
        return { 'background-image': 'url(' + imageUrl + ')' };
      }
      return {};
    }
  }
}
</script>
 
<style>
.background-image-class {
  /* 设置背景图片样式 */
  background-size: cover;
  background-position: center;
}
</style>

在这个例子中，如果hasBackgroundImage是true，那么background-image-class类将被应用，从而设置背景图片。你也可以直接在计算属性backgroundStyle中定义背景图片样式，然后将其绑定到元素的:style上。