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);
});
}
}
});
