vue img点击后更换img并且触发函数

在Vue.js中，你可以通过绑定`v-on:click`事件监听图片元素的点击，并结合`v-bind:class`或`:style`动态更改图片，同时调用自定义函数。下面是一个基本的例子：

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

<script>
export default {
  data() {
    return {
      currentImage: 'image1.jpg', // 初始图片路径
      nextImageList: ['image2.jpg', 'image3.jpg'], // 图片列表
      currentIndex: 0, // 当前图片索引
    };
  },
  methods: {
    changeImageAndTriggerFunction() {
      this.currentIndex = (this.currentIndex + 1) % this.nextImageList.length; // 循环索引
      this.currentImage = this.nextImageList[this.currentIndex]; // 更换图片
      // 这里可以添加你需要触发的具体函数
      this.triggerCustomFunction();
    },
    triggerCustomFunction() { /* 这里是你需要调用的实际函数 */ },
  },
};
</script>

在这个例子中，当用户点击图片时，`changeImageAndTriggerFunction`方法会被调用，它会更新当前图片并切换到下一个图片，如果到了列表末尾则返回到第一个。同时，你可以在这里定义`triggerCustomFunction`方法来执行其他你需要的操作。