如何在Vue.js中循环使用JavaScript中的表制作轮播

new Vue({
  el: '#app',
  data: {
    carouselData: [
      { id: 1, image: 'image1.jpg' },
      { id: 2, image: 'image2.jpg' },
      { id: 3, image: 'image3.jpg' }
    ]
  }
});

<div id="app">
  <div class="carousel">
    <div v-for="item in carouselData" :key="item.id">
      <img :src="item.image" alt="carousel image">
    </div>
  </div>
</div>

.carousel {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.carousel div {
  flex: 0 0 100%;
  transition: transform 0.5s;
}

.carousel img {
  width: 100%;
  height: auto;
}

new Vue({
  el: '#app',
  data: {
    carouselData: [
      { id: 1, image: 'image1.jpg' },
      { id: 2, image: 'image2.jpg' },
      { id: 3, image: 'image3.jpg' }
    ]
  },
  created() {
    setInterval(() => {
      this.carouselData.push(this.carouselData.shift());
    }, 3000);
  }
});