溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天學習了vue如何從接口請求數據，所以，今天添加一點小筆記。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取圖片列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<ul>
<li>
<img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
</li>
</ul>
</div>
</body>
<script src="http://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script>
var demo=new Vue({
el:'#app',
data: {
imgList:[],
getImgUrl: '' //存數據接口
},
created: function(){
this.getImg() //定義方法
},
methods: {
getImg: function(){
var that = this;
that.$http({ //調用接口
method:'GET',
url:this.getImgUrl //this指data
}).then(function(response){ //接口返回數據
this.imgList=response.data;
},function(error){
})
}
}
})
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
