vue中怎么切换展示图片

在Vue中切换展示图片可以通过v-bind和v-if指令实现。你可以将图片URL存储在一个数组中，然后使用v-bind绑定一个变量到img标签的src属性上，以便动态地切换图片。同时，使用v-if指令控制图片的展示与隐藏。具体实现可以参考下面的代码示例：

<template>
  <div>
    <img v-bind:src="imageList[currentIndex]" v-if="isShow">
    <button @click="prevImage">上一张</button>
    <button @click="nextImage">下一张</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      isShow: true,
      imageList: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ]
    }
  },
  methods: {
    prevImage() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextImage() {
      if (this.currentIndex < this.imageList.length - 1) {
        this.currentIndex++;
      }
    }
  }
}
</script>

在上面的代码中，我们先定义了一个包含三张图片URL的数组`imageList`，并将当前展示的图片索引存储在`currentIndex`变量中。在模板中，我们使用v-if指令判断是否展示图片，使用v-bind指令动态绑定img标签的src属性为当前展示图片的URL。在按钮的click事件中，我们可以通过修改`currentIndex`变量的值来切换展示的图片。