Vue中能否使用@mouseover事件修改图片的:src属性？

嘿，这个需求很常见，咱们直接一步步来搞定它！核心思路是用响应式变量控制图片的src，这样鼠标悬停时只需要修改变量值就行，完全符合Vue的响应式设计理念，比直接操作DOM靠谱多了。

步骤1：定义响应式变量存储当前图片地址 #

不管你用Vue2的Options API还是Vue3的Composition API，首先得搞个响应式变量存当前显示的图片地址，初始化时设为第一张图：

Vue2 Options API写法 #

data() {
  return {
    // 初始化用第一张图的地址
    currentImageSrc: this.gift.images.edges[0].node.src
  }
}

Vue3 Composition API写法 #

import { ref } from 'vue'

export default {
  setup(props) {
    // 假设gift是通过props传入的组件数据
    const gift = props.gift
    const currentImageSrc = ref(gift.images.edges[0].node.src)

    // 后面的方法和返回值继续往下写
  }
}

步骤2：修改img标签的绑定与事件 #

把原来的静态src绑定改成响应式变量，同时给@mouseover（鼠标移入）和@mouseout（鼠标移出，建议加上提升体验）绑定处理方法：

<!-- 给alt加个有意义的文本，提升 accessibility 友好度 -->
<img 
  :src="currentImageSrc" 
  @mouseover="switchToSecondImage" 
  @mouseout="switchBackToFirstImage" 
  alt="Gift product image" 
  class="img-responsive"
>

步骤3：编写切换图片的方法 #

接下来写处理鼠标事件的方法，务必加数组长度判断，避免当只有一张图时出现undefined报错：

Vue2 Options API写法 #

methods: {
  switchToSecondImage() {
    // 确认存在第二张图再切换
    if (this.gift.images.edges.length > 1) {
      this.currentImageSrc = this.gift.images.edges[1].node.src
    }
  },
  switchBackToFirstImage() {
    // 鼠标移出时切回第一张图
    this.currentImageSrc = this.gift.images.edges[0].node.src
  }
}

Vue3 Composition API写法 #

把方法写在setup里，最后返回给模板使用：

// 接上面的setup代码
const switchToSecondImage = () => {
  if (gift.images.edges.length > 1) {
    currentImageSrc.value = gift.images.edges[1].node.src
  }
}

const switchBackToFirstImage = () => {
  currentImageSrc.value = gift.images.edges[0].node.src
}

// 把变量和方法返回给模板
return {
  currentImageSrc,
  switchToSecondImage,
  switchBackToFirstImage
}

额外小提示 #

• 如果不需要鼠标移出切回，只保留@mouseover事件就行，但从用户体验角度，建议加上切回逻辑。
• 数组长度判断是关键！如果你的gift.images.edges可能只有一张图，直接访问edges[1]会导致控制台报错，这个细节别漏了。

内容的提问来源于stack exchange，提问作者Gibson