在vue中 鼠标移入 切换背景图片 移出时再次切换图片

您好！对于您的问题，您可以使用 Vue 的事件绑定和动态绑定 class 的方式来实现。

在模板中，您可以通过 `@mouseenter` 和 `@mouseleave` 监听鼠标移入和移出事件，同时使用 `:class` 动态绑定 class，根据当前状态切换不同的图片。

假设您有两张图片，分别为 `image1.png` 和 `image2.png`，您可以这样写：

<template>
  <div
    class="image"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    :class="{ 'image-hover': isHover }"
  >
  </div>
</template>

<style>
.image {
  background-image: url('image1.png');
  background-size: cover;
  width: 200px;
  height: 200px;
}

.image-hover {
  background-image: url('image2.png');
}
</style>

<script>
export default {
  data() {
    return {
      isHover: false
    }
  }
}
</script>

在模板中，我们定义了一个 `div`，并设置了默认的背景图片为 `image1.png`。同时，我们监听了 `@mouseenter` 和 `@mouseleave` 事件，并使用 `isHover` 变量来保存当前鼠标是否移入。在 `:class` 中，我们使用了对象语法，将 `image-hover` class 绑定到 `isHover` 变量的值上。在样式中，我们设置了 `image-hover` class 的背景图片为 `image2.png`。

这样，当鼠标移入时，`isHover` 变量的值为 `true`，`div` 的 class 将会变成 `image image-hover`，从而切换为 `image2.png`；当鼠标移出时，`isHover` 变量的值为 `false`，`div` 的 class 将恢复为 `image`，从而切换回 `image1.png`。

希望这可以帮助到您！