当前位置：首页 > VUE

Vue实现点击div实现图片切换

2026-01-19 22:45:40VUE

实现思路

通过Vue的数据绑定和事件监听，动态修改当前显示的图片路径或索引，实现点击div切换图片的效果。核心是利用v-on监听点击事件，并结合v-bind动态绑定图片的src属性。

Vue实现点击div实现图片切换

基础实现代码

<template>
  <div>
    <!-- 图片展示区域 -->
    <img :src="currentImage" alt="当前图片" style="max-width: 300px;">

    <!-- 点击切换的div区域 -->
    <div 
      @click="switchImage" 
      style="width: 200px; height: 50px; background: #eee; cursor: pointer;"
    >
      点击切换图片
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ],
      currentIndex: 0
    }
  },
  computed: {
    currentImage() {
      return this.images[this.currentIndex];
    }
  },
  methods: {
    switchImage() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    }
  }
}
</script>

功能扩展

添加过渡动画 通过Vue的<transition>组件实现淡入淡出效果：

Vue实现点击div实现图片切换

<transition name="fade" mode="out-in">
  <img :key="currentImage" :src="currentImage" alt="当前图片">
</transition>

CSS部分：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

显示缩略图列表 在div下方添加缩略图导航：

<div class="thumbnail-container">
  <div 
    v-for="(img, index) in images" 
    :key="index"
    @click="currentIndex = index"
  >
    <img :src="img" width="50">
  </div>
</div>