vue实现鼠标悬停换图片

在Vue中，可以通过使用计算属性和监听鼠标事件来实现鼠标悬停换图片的效果。

首先，你需要为每张图片定义一个路径变量，例如：

<template>
  <div>
    <img :src="currentImg" @mouseover="changeImg" @mouseout="changeImg"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: '/path/to/default-img.jpg',
      hoverImg: '/path/to/hover-img.jpg',
      currentImg: '/path/to/default-img.jpg'
    }
  },
  methods: {
    changeImg() {
      this.currentImg = this.currentImg === this.defaultImg ? this.hoverImg : this.defaultImg
    }
  }
}
</script>

当鼠标移动到图片上时，我们通过监听鼠标的`mouseover`事件并调用`changeImg`方法来更改`currentImg`的值，从而实现图片的切换。当鼠标离开图片时，我们再监听鼠标的`mouseout`事件并调用`changeImg`方法，实现图片的还原。

这只是一种简单的实现方法，更复杂的需求可以通过更改代码来实现。

相关问题

vue实现鼠标悬停图片放大事件

可以使用CSS的`transform: scale`属性来实现鼠标悬停图片放大的效果，配合Vue的事件绑定和计算属性即可。

首先，在模板中使用`v-on`指令绑定`mouseover`和`mouseout`事件，当鼠标悬停在图片上时，将`isHover`属性设置为`true`，当鼠标移开时，将`isHover`属性设置为`false`。

<template>
  <div>
    <img :src="imageUrl" :style="imgStyle" @mouseover="isHover = true" @mouseout="isHover = false">
  </div>
</template>

然后，使用计算属性根据`isHover`属性的值动态计算`imgStyle`属性，当`isHover`为`true`时，将图片放大1.2倍，当`isHover`为`false`时，恢复原大小。

<script>
export default {
  data() {
    return {
      isHover: false
    }
  },
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  },
  computed: {
    imgStyle() {
      return {
        transform: this.isHover ? 'scale(1.2)' : 'scale(1)',
        transition: 'all 0.3s ease' // 添加过渡效果，使放大效果更平滑
      }
    }
  }
}
</script>

这样，当鼠标悬停在图片上时，图片就会放大1.2倍，移开时又会恢复原大小。

vue3鼠标悬停替换图标

在 Vue3 中，你可以利用 v-bind:class 或者 :style 标签以及计算属性来实现鼠标悬停时替换图标的功能。这里是一个简单的例子：

<template>
  <button @mouseenter="hoverState = true" @mouseleave="hoverState = false">
    <span v-if="!hoverState">{{ iconOne }}</span>
    <span v-if="hoverState">{{ iconTwo }}</span>
    <img :src="hoverIconSrc" alt="" v-if="hoverState" style="display:none;"> <!-- 隐藏默认图标 -->
  </button>
</template>

<script>
export default {
  data() {
    return {
      hoverState: false,
      iconOne: 'default_icon_1',
      iconTwo: 'hover_icon_2',
      hoverIconSrc: 'hover_icon_url', // 悬停时显示的图片URL
    };
  },
};
</script>

在这个例子中，当鼠标悬停在按钮上时，`hoverState` 变为 `true`，此时会展示 `iconTwo` 和隐藏默认图标，如果移开鼠标则 `hoverState` 为 `false`，再次显示 `iconOne`。