以下是一个基本的 Vue 轮播图实现：

1. 在 Vue 组件中声明一个数组，用于存放图片路径和标题等信息：

data() {return {images: [{src: 'https://picsum.photos/800/300?image=0',title: 'Image 1'},{src: 'https://picsum.photos/800/300?image=1',title: 'Image 2'},{src: 'https://picsum.photos/800/300?image=2',title: 'Image 3'}],currentIndex: 0}
}

1. 使用 v-for 循环遍历图片数组，生成轮播图的图片和标题：

<template><div class="carousel"><div class="slider"><div v-for="(image, index) in images" :key="index" :class="{active: index === currentIndex}"class="slide":style="{backgroundImage: `url(${image.src})`}"><h2>{{image.title}}</h2></div></div></div>
</template>

1. 实现点击上一张和下一张按钮的功能，用 currentIndex 控制当前显示的图片：

methods: {prev() {if (this.currentIndex === 0) {this.currentIndex = this.images.length - 1;} else {this.currentIndex--;}},next() {if (this.currentIndex === this.images.length - 1) {this.currentIndex = 0;} else {this.currentIndex++;}}
}

1. 在模板中添加上一张和下一张按钮，绑定点击事件：

<template><div class="carousel"><div class="slider"><div v-for="(image, index) in images" :key="index" :class="{active: index === currentIndex}"class="slide":style="{backgroundImage: `url(${image.src})`}"><h2>{{image.title}}</h2></div></div><div class="controls"><button @click="prev">Prev</button><button @click="next">Next</button></div></div>
</template>

完整代码如下：

<template><div class="carousel"><div class="slider"><div v-for="(image, index) in images" :key="index" :class="{active: index === currentIndex}"class="slide":style="{backgroundImage: `url(${image.src})`}"><h2>{{image.title}}</h2></div></div><div class="controls"><button @click="prev">Prev</button><button @click="next">Next</button></div></div>
</template><script>
export default {data() {return {images: [{src: 'https://picsum.photos/800/300?image=0',title: 'Image 1'},{src: 'https://picsum.photos/800/300?image=1',title: 'Image 2'},{src: 'https://picsum.photos/800/300?image=2',title: 'Image 3'}],currentIndex: 0}},methods: {prev() {if (this.currentIndex === 0) {this.currentIndex = this.images.length - 1;} else {this.currentIndex--;}},next() {if (this.currentIndex === this.images.length - 1) {this.currentIndex = 0;} else {this.currentIndex++;}}}
}
</script><style>
.carousel {position: relative;width: 800px;height: 300px;
}.slider {display: flex;position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}.slide {flex: 1;background-size: cover;background-repeat: no-repeat;background-position: center;position: relative;opacity: 0;transition: opacity 1s ease-in-out;
}.slide.active {opacity: 1;
}h2 {position: absolute;bottom: 20px;left: 20px;color: #fff;font-size: 24px;
}.controls {position: absolute;bottom: 20px;right: 20px;
}button {margin-left: 10px;
}
</style>