Vue 轮播图代码示例：使用按钮切换图片

<p>&quot;<template>\n  &lt;div class=&quot;carousel&quot;&gt;\n    &lt;img :src=&quot;currentImage&quot; alt=&quot;carousel image&quot; /&gt;\n    &lt;div class=&quot;buttons&quot;&gt;\n      &lt;button @click=&quot;previousImage&quot;&gt;Previous</button>\n      &lt;button @click=&quot;nextImage&quot;&gt;Next</button>\n    </div>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      images: [\n        &quot;image1.jpg&quot;,\n        &quot;image2.jpg&quot;,\n        &quot;image3.jpg&quot;\n      ],\n      currentIndex: 0\n    }\n  },\n  computed: {\n    currentImage() {\n      return this.images[this.currentIndex];\n    }\n  },\n  methods: {\n    previousImage() {\n      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;\n    },\n    nextImage() {\n      this.currentIndex = (this.currentIndex + 1) % this.images.length;\n    }\n  }\n}\n</script>\n\n<style>\n.carousel {\n  text-align: center;\n}\n\n.buttons {\n  margin-top: 10px;\n}\n\nbutton {\n  margin: 5px;\n}\n</style>\n&quot;\n\n在上面的示例中，<code>images</code>数组包含要显示的图片的路径。<code>currentIndex</code>表示当前显示的图片的索引。<code>currentImage</code>是一个计算属性，根据<code>currentIndex</code>获取当前显示的图片路径。\n\n<code>previousImage</code>方法将<code>currentIndex</code>减1，并使用模运算确保索引循环到数组的末尾。<code>nextImage</code>方法将<code>currentIndex</code>加1，并使用模运算确保索引循环到数组的开头。\n\n在模板中，使用<code>&lt;img&gt;</code>标签显示当前图片，使用两个按钮分别调用<code>previousImage</code>和<code>nextImage</code>方法来切换图片。</p>