Vue 轮播图组件代码实现 - 从入门到实践

<p>///'<template>//n  &lt;div class=///'carousel///'&gt;//n    &lt;div class=///'slides///'&gt;//n      &lt;div v-for=///'(slide, index) in slides///' :key=///'index///' //n           :class=///'{ active: currentIndex === index }///'&gt;//n        &lt;img :src=///'slide.image///' alt=///'Slide Image///'&gt;//n      </div>//n    </div>//n    &lt;div class=///'indicators///'&gt;//n      &lt;span v-for=///'(slide, index) in slides///' :key=///'index///' //n            :class=///'{ active: currentIndex === index }///'//n            @click=///'changeSlide(index)///'&gt;//n      </span>//n    </div>//n  </div>//n</template>//n//n<script>//n export default {//n  data() {//n    return {//n      slides: [//n        { image: 'slide1.jpg' },//n        { image: 'slide2.jpg' },//n        { image: 'slide3.jpg' }//n      ],//n      currentIndex: 0//n    };//n  },//n  methods: {//n    changeSlide(index) {//n      this.currentIndex = index;//n    }//n  }//n};//n</script>//n//n<style scoped>//n.carousel {//n  width: 100%;//n  height: 300px;//n  position: relative;//n}//n//n.slides {//n  width: 100%;//n  height: 100%;//n  display: flex;//n}//n//n.slides &gt; div {//n  flex: 1;//n  opacity: 0;//n  transition: opacity 0.5s;//n}//n//n.slides &gt; div.active {//n  opacity: 1;//n}//n//nimg {//n  width: 100%;//n  height: 100%;//n  object-fit: cover;//n}//n//n.indicators {//n  position: absolute;//n  bottom: 10px;//n  left: 50%;//n  transform: translateX(-50%);//n  display: flex;//n}//n//n.indicators span {//n  width: 10px;//n  height: 10px;//n  background-color: gray;//n  border-radius: 50%;//n  margin: 0 5px;//n  cursor: pointer;//n}//n//n.indicators span.active {//n  background-color: black;//n}//n</style>//n```//n///'<template>//n  <div>//n    <carousel></carousel>//n  </div>//n</template>//n//n<script>//n import Carousel from './Carousel.vue';//n//n export default {//n  components: {//n    Carousel//n  }//n};//n</script>//n/</p>