1、效果
2、index.html
<!DOCTYPE html> <html lang="en"> <link> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <link rel="stylesheet" href="CSS/reset.css"> <link rel="stylesheet" href="CSS/weui.min.css"> <link rel="stylesheet" href="CSS/base.css"> <link rel="stylesheet" href="Css/index.css"> <title>Document</title> </head> <body> <!--top轮播图片--> <div class="top"> <img id="moveImgs" :src="now" alt=""> <!-- <input type="text" value="Images/1.jpg" v-model="now"> --> </div> <script src="Javascript/plugin/vue.min.js"></script> <script src="Javascript/plugin/axios.min.js"></script> <script src="Javascript/index.js"></script> </body> </html>
3、index.js
new Vue({ el:".top", data:{ pic:[], now:"Images/1.jpg" // imgs[] }, mounted:function(){ this.$nextTick(function(){ this.getPic(); }); }, computed:{}, methods:{ getPic:function(){ // 也可以通过 params 对象传递参数 axios.get('Data/goPics.json', { params: { //ID: 12345 }, responseType: 'json', // default }) .then(function (response) { this.pic=response; var i=0; //alert(this.pic.data[0].url) var _this=this; setInterval(function(){ if(i>=_this.pic.data.length){ i=0; } _this.now=_this.pic.data[i].url; var element = document.getElementById('moveImgs');//使用最原始的方法，得到元素，再修改 element.src = _this.now; //Vue.set(_this.now, i,_this.pic.data[i].url); console.log(_this.now); i++; },2000); }) .catch(function (error) { console.log(error); }); } } });