vue按钮点击切换图片

在Vue.js中，你可以通过绑定事件监听器（如`@click`）和JavaScript处理函数来实现按钮点击切换图片的功能。这里是一个简单的例子：

首先，在HTML部分，创建一个按钮和两个图片元素，给图片设置初始显示状态为隐藏（例如，使用`v-if`指令）：

<button @click="switchImage">切换图片</button>
<img :src="currentImage" v-if="!showNextImage" />
<img :src="nextImage" v-if="showNextImage" style="display:none;" />

然后，在你的Vue组件的script部分，定义数据属性`currentImage`, `nextImage`, `showNextImage`以及切换方法`switchImage`：

export default {
  data() {
    return {
      currentImage: 'image1.jpg',
      nextImage: 'image2.jpg', // 或者从服务器获取URL
      showNextImage: false,
    };
  },
  methods: {
    switchImage() {
      this.showNextImage = !this.showNextImage; // 切换显示状态
      if (this.showNextImage) {
        this.currentImage = this.nextImage;
      } else {
        this.currentImage = this.prevImage || this.currentImage; // 如果没有prevImage，就回到当前图
      }
    },
  },
};

在这个例子中，当按钮被点击时，`switchImage`方法会被调用，它会切换`showNextImage`的状态，进而改变当前显示的图片。如果`showNextImage`为真，则`currentImage`切换到`nextImage`；反之则切换回`currentImage`（如果没有`prevImage`，则保持不变）。