Vue 如何实现图片的两种图像交替

在 Vue 开发中，实现图片的两种图像交替是一个常见需求，能够为用户带来更丰富的视觉体验。接下来我们就详细探讨一下如何实现这一功能。

我们需要创建一个基本的 Vue 项目结构。使用 Vue CLI 快速搭建项目后，进入项目目录，在 src/components 目录下创建一个新的组件，例如 ImageToggle.vue。

在 ImageToggle.vue 组件中，我们先定义模板部分。在模板里，我们用一个 img 标签来展示图片。通过 :src 绑定动态数据源来切换图片。例如：

<template>
  <div>
    <img :src="currentImage" alt="交替图片">
    <button @click="toggleImage">切换图片</button>
  </div>
</template>

这里的 currentImage 是一个响应式数据，用于存储当前显示的图片路径；toggleImage 是一个方法，当用户点击按钮时会调用它来切换图片。

接着是脚本部分，在 script 标签里定义数据和方法。我们定义一个 data 函数返回一个对象，在这个对象里初始化 image1、image2 分别存储两张图片的路径，同时定义 currentImage 并将其初始化为 image1。

<script>
export default {
  data() {
    return {
      image1: 'path/to/image1.jpg',
      image2: 'path/to/image2.jpg',
      currentImage: 'path/to/image1.jpg'
    };
  },
  methods: {
    toggleImage() {
      this.currentImage = this.currentImage === this.image1? this.image2 : this.image1;
    }
  }
};
</script>

在 toggleImage 方法里，通过一个简单的三元表达式判断当前显示的图片是 image1 还是 image2，然后切换 currentImage 的值，从而实现图片交替。

除了按钮点击切换，还可以实现鼠标悬停切换效果。我们可以在 template 里给 img 标签添加 @mouseenter 和 @mouseleave 事件绑定。

<template>
  <div>
    <img :src="currentImage" alt="交替图片" @mouseenter="hoverImage" @mouseleave="leaveImage">
  </div>
</template>

在 script 里添加相应方法：

<script>
export default {
  data() {
    return {
      image1: 'path/to/image1.jpg',
      image2: 'path/to/image2.jpg',
      currentImage: 'path/to/image1.jpg'
    };
  },
  methods: {
    hoverImage() {
      this.currentImage = this.image2;
    },
    leaveImage() {
      this.currentImage = this.image1;
    }
  }
};
</script>

通过以上步骤，我们在 Vue 中轻松实现了图片的两种图像交替，无论是通过按钮点击还是鼠标悬停交互，都能满足不同场景下的需求，为应用增添更具交互性的视觉效果。