vue鼠标放入切换图片

你可以使用 Vue 的事件绑定和条件渲染来实现鼠标放入切换图片的效果。

首先，在模板中为图片绑定 mouseover 和 mouseout 事件，分别触发对应的方法：

<template>
  <div>
    <img
      v-bind:src="imageUrl"
      v-on:mouseover="hover=true"
      v-on:mouseout="hover=false"
    />
  </div>
</template>

然后在 data 中定义一个布尔类型的变量 hover，用于控制图片的显示：

<script>
export default {
  data() {
    return {
      hover: false,
      imageUrl: "默认图片路径",
      hoverImageUrl: "鼠标放入后的图片路径",
    };
  },
  computed: {
    // 根据 hover 的值来返回对应的图片路径
    image() {
      return this.hover ? this.hoverImageUrl : this.imageUrl;
    },
  },
};
</script>

最后，使用 computed 属性来根据 hover 变量的值动态渲染图片：

<template>
  <div>
    <img v-bind:src="image" />
  </div>
</template>

这样就可以实现鼠标放入切换图片的效果了。