用vue语言实现按钮切换图片

在Vue中实现按钮切换图片通常会用到`v-bind:class`指令或者`v-if`/`v-else`条件渲染。这里是一个简单的示例：

首先，假设你有两张图片资源，比如 `image1.jpg` 和 `image2.jpg`，并有一个按钮元素和一个变量 `currentImage` 来存储当前显示的图片路径。

HTML部分：

<button @click="switchImage">切换图片</button>
<img :src="currentImage" alt="图片展示">

然后，在你的Vue组件的JavaScript部分：

export default {
  data() {
    return {
      currentImage: 'image1.jpg', // 初始显示 image1
      images: ['image1.jpg', 'image2.jpg'], // 存储所有图片地址
    };
  },
  methods: {
    switchImage() {
      this.currentImage = this.images[(this.images.indexOf(this.currentImage) + 1) % this.images.length]; // 按索引轮流切换图片
    },
  },
};

在这个例子中，每次点击按钮时，`switchImage` 方法会被调用，它会计算当前图片在数组中的索引，然后加一取模，保证索引不会超出数组长度，从而实现图片的循环切换。