vue入门

120 阅读1分钟
<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);  这里的图片放在定时器里面就是实现间隔时间的图片转化