用 vue 写一个 点击切换的轮播图

好的，这是一个很好的问题，以下是使用Vue编写的简单点击切换的轮播图的示例代码：

<template>
  <div class="slideshow">
    <img :src="images[currentIndex]" alt="slideshow image">
    <button class="prev" @click="previousSlide">&#10094;</button>
    <button class="next" @click="nextSlide">&#10095;</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ["image1.jpg", "image2.jpg", "image3.jpg"],
      currentIndex: 0
    }
  },
  methods: {
    previousSlide() {
      this.currentIndex = (this.currentIndex === 0) ? this.images.length - 1 : this.currentIndex - 1;
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex === this.images.length - 1) ? 0 : this.currentIndex + 1;
    }
  }
}
</script>

<style scoped>
.slideshow {
  position: relative;
  width: 100%;
  height: auto;
}
img {
  width: 100%;
  height: auto;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.prev {
  left: 35px;
}
.next {
  right: 35px;
}
</style>

这个组件具有三张图片的图像库和一个`currentIndex`，它跟踪当前显示的图像。然后我们有两个方法：`previousSlide()`和`nextSlide()`，用于切换到前一个或下一个图像。最后，我们在 template 中渲染图像和两个按钮。每个按钮都与其相应的方法相关联。