VUE实现图片切换功能（v-showv-onv-ifv-bind）

<template>
  <div id="app">
    <div v-show="currentIndex === 0">
      <img v-bind:src="images[0]" alt="Image 1">
    </div>
    <div v-show="currentIndex === 1">
      <img v-bind:src="images[1]" alt="Image 2">
    </div>
    <button v-on:click="prev">Prev</button>
    <button v-on:click="next">Next</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [
        'image1.jpg',
        'image2.jpg'
      ]
    }
  },
  methods: {
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    }
  }
}
</script>

这个简单的Vue应用展示了如何使用v-show, v-on, v-bind指令来实现图片的切换功能。currentIndex 用于跟踪当前显示的图片索引，next 和 prev 方法用于更新索引，实现图片的切换。