vue用button写切换图片

可以使用以下代码实现：

在template中:

<template>
  <div>
    <img :src="currentImg" alt="图片">
    <button @click="changeImg">切换图片</button>
  </div>
</template>

在script中:

<script>
export default {
  data() {
    return {
      imgs: [
        'https://example.com/img1.jpg',
        'https://example.com/img2.jpg',
        'https://example.com/img3.jpg',
      ],
      currentImgIndex: 0,
    }
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentImgIndex]
    },
  },
  methods: {
    changeImg() {
      this.currentImgIndex = (this.currentImgIndex + 1) % this.imgs.length
    },
  },
}
</script>

这里使用了一个imgs数组来存放所有的图片地址，currentImgIndex表示当前显示的图片的下标，currentImg是一个computed属性，用于获取当前显示的图片的地址。changeImg方法用于切换图片，每次点击按钮就将currentImgIndex加1并对图片总数取余，实现循环切换图片的效果。