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

在Vue中，当鼠标移入元素时，可以通过绑定`@mouseover`事件来触发相应的方法，该方法可以通过修改数据来改变元素的背景图片。同样地，当鼠标移出元素时，可以绑定`@mouseout`事件触发另一个方法，该方法也可以通过修改数据来切换回原来的背景图片。

例如，假设我们有一个`div`元素，它绑定了一个`backgroundImage`属性来控制背景图片的显示，我们可以像下面这样编写代码来实现上述功能：

<template>
  <div
    class="my-div"
    :style="{backgroundImage: bgImage}"
    @mouseover="changeBgImage"
    @mouseout="resetBgImage"
  >
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgImage: 'url(path/to/original/image.jpg)'
    }
  },
  methods: {
    changeBgImage() {
      this.bgImage = 'url(path/to/alternate/image.jpg)'
    },
    resetBgImage() {
      this.bgImage = 'url(path/to/original/image.jpg)'
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个`bgImage`数据来控制元素的背景图片。当鼠标移入时，`changeBgImage`方法会被触发，它会将`bgImage`数据修改为另一张图片的路径。当鼠标移出时，`resetBgImage`方法会被触发，它会将`bgImage`数据修改为原始图片的路径，从而实现切换背景图片的效果。最后，我们将这两个方法绑定到`@mouseover`和`@mouseout`事件上，通过这种方式来控制背景图片的切换。