如何利用Vue实现图片的幻灯片和切换效果？

new Vue({
  el: "#app",
  data: {
    images: [
      "image1.jpg",
      "image2.jpg",
      "image3.jpg"
    ],
    currentImageIndex: 0
  },
  methods: {
    nextImage: function() {
      if (this.currentImageIndex < this.images.length - 1) {
        this.currentImageIndex++;
      } else {
        this.currentImageIndex = 0;
      }
    },
    previousImage: function() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
      } else {
        this.currentImageIndex = this.images.length - 1;
      }
    }
  }
});

<div id="app">
  <img src="/static/imghw/default1.png"  data-src="images[currentImageIndex]"  class="lazy"  : alt="image">
  <button @click="previousImage">Previous</button>
  <button @click="nextImage">Next</button>
</div>

<div id="app">
  <transition name="fade">
    <img src="/static/imghw/default1.png"  data-src="images[currentImageIndex]"  class="lazy"  : alt="image">
  </transition>
  <button @click="previousImage">Previous</button>
  <button @click="nextImage">Next</button>
</div>

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}