三分钟用Vue写一个轮播图

<div id="app">
<img v-for="(item,i) in imgList" v-show='i===activeIndex' :src="item" style="width:700px;height: 300px;">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                activeIndex:0,
                imgList:[
                    "http://p1.music.126.net/89mxoOoXG-UX72COwMrmoQ==/109951165293030503.jpg?imageView&quality=89",
                    "http://p1.music.126.net/QWh3WSB202xJ5RPxFtReqw==/109951165292798698.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZBExCqms6eQh6TiuMBjM8g==/109951165292458194.jpg?imageView&quality=89",
                    "http://p1.music.126.net/vwcNZ3q5a6TPV_DTlfB5bg==/109951165292469196.jpg?imageView&quality=89"
                ]
            }
        },
        mounted() {
            setInterval(()=>{
                if(++this.activeIndex===this.imgList.length)this.activeIndex=0
            },1000);
        },
        methods: {
            
        }
    })
</script>
这里的重点就是使用mounted指令：
mounted属于一个钩子函数，页面内容渲染完毕后，会自动引用该函数。
具体请学习Vue生命周期！