<div id="app"> <img v-show='index===i' :src="item" alt="" v-for="(item,i) in imgs"> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script> <script> let app = new Vue({ el:'#app', data() { return { imgs: [ 'http://p1.music.126.net/vwcNZ3q5a6TPV_DTlfB5bg==/109951165292469196.jpg?imageView&quality=89', 'http://p1.music.126.net/0aqUlKrRcWJSBKgy0FRMww==/109951165292458375.jpg?imageView&quality=89', 'http://p1.music.126.net/OnmUiowSs1VKPCUqL3gHiA==/109951165292788602.jpg?imageView&quality=89' ], index: 0 } }, mounted() { setInterval(() => { if(++this.index===3) this.index=0 }, 1000); }, })
这里使用的是 v-show v-show的属性就是当此前属性不在有用时间它删除 这样就减少了浏览器的解析压力 在有用的时候在展现出来 :src item 就是向 imgs 数组里获取图片的资源
通过 index 值得变化来展现图片实现轮播图
setInterval(() => {
if(++this.index===3) this.index=0
}, 1000); 这里的图片放在定时器里面就是实现间隔时间的图片转化