2、在组件内引入swiper的js和css
引入js:---- import Swiperfrom "../../node_modules/swiper/swiper-bundle"
引入css:------@import "../../node_modules/swiper/swiper-bundle.css"
3、在方法里面写一个初始化轮播图的方法:
// 如果需要前进后退按钮
navigation: {
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
})
}
5、在created里面进行网络请求：
你开个定时器，一秒换一个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>
