vue img点击后更换img

在Vue.js中，如果你想实现图片的点击更换功能，可以使用`v-on:click`指令绑定一个事件处理器，然后在该处理器内部更改图片的src属性。这是一个基本的示例：

<template>
  <div>
    <img :src="currentImage" @click="changeImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: 'image1.jpg', // 初始显示的图片路径
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'] // 可供选择的所有图片路径
    };
  },
  methods: {
    changeImage() {
      this.currentImage = this.images[(this.currentImageIndex + 1) % this.images.length]; // 图片切换逻辑，这里使用数组索引来循环替换
      // 或者你可以有一个自增的计数器currentImageIndex，每次改变都增加1
      // this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
    }
  },
  computed: {
    currentImageIndex() {
      return this.images.indexOf(this.currentImage); // 获取当前图片在images数组中的索引
    }
  }
};
</script>

在这个例子中，当用户点击图片时，`changeImage`方法会被触发，它会将`currentImage`指向数组中的下一个图片，如果到了数组末尾则回到第一个。通过这种方式实现了点击更换图片的效果。