你开个定时器,一秒换一个img的src不就行了?
随便写了个:
<div id="app"><div class="pic">
<img :src="now" />
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
pic:["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"],
i:"0",
now:"./images/1.jpg",
},
mounted:function(){
this.now=this.pic[0]
var _this=this
setInterval(function(){
_this.i++
_this.now=_this.pic[_this.i]
if(_this.i>=_this.pic.length-1){
_this.i=0
}
},1000)
},
methods:{
}
})
</script>
1.安装依赖
npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
版本不过高
2.在main文件里全局引入轮播图和css同时使用Vue.use来注册一个轮播图插件
3。在自己的组件文件夹中新建一个轮播图组件MySwiper.vue
4.把组件引用到app.vue文件中去并使用