vue 通过css设置div背景图片

你可以使用 Vue 的 `class` 或 `style` 属性来为 div 元素设置背景图片。

1. 使用 `class` 绑定

在 Vue 组件的 `<template>` 标签中，你可以通过 `class` 绑定来为 div 元素指定一个样式类。然后在 CSS 样式表中定义这个样式类的背景图片样式。

<template>
  <div class="my-div"></div>
</template>

<style>
.my-div {
  background-image: url('/path/to/image.jpg');
  /* 其它样式属性 */
}
</style>

2. 使用 `style` 绑定

你也可以直接使用 `style` 绑定来为 div 元素设置背景图片，这样你可以在组件中动态指定图片的 URL。在 Vue 中，你可以使用对象语法或数组语法来绑定 `style` 属性。

<template>
  <div :style="{ 'background-image': 'url(' + imageUrl + ')' }"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

或者使用数组语法：

<template>
  <div :style="[myStyles, { 'background-image': 'url(' + imageUrl + ')' }]"></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      myStyles: {
        /* 其它样式属性 */
      }
    };
  }
};
</script>

在这两个例子中，我们通过 `:style` 绑定将一个对象或数组传递给 div 元素的 `style` 属性。对象或数组中的 `background-image` 属性指定了背景图片的 URL，这个 URL 可以从组件的数据中获取。