使用VUE来实现轮播图的功能开发
源代码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script> <style> </style></head><body> <div id="app"> <div style="width:500px" > <img width="600" height="200" v-for="(item, index) in banner" v-show="listIndex === index":key="index":src="item"/> </div> </div> <script> var app = new Vue({ el: '#app', data: { banner: ['https://img0.baidu.com/it/u=3872626532,690754956&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=320', 'https://img0.baidu.com/it/u=500430250,1313737643&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=267', 'https://img2.baidu.com/it/u=1724313134,4026433148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=146'], listIndex:0, }, methods: { setTimer: function () { timer = setInterval(() => { this.listIndex++; if (this.listIndex == this.banner.length) { this.listIndex = 0; } }, 2000) } }, mounted(){ this.setTimer(); }, created() { }, }) </script></body></html>
赞
