這兩天學(xué)習(xí)了vue如何從接口請求數(shù)據(jù)，所以，今天添加一點(diǎn)小筆記。
<!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: '' //存數(shù)據(jù)接口 }, created: function(){ this.getImg() //定義方法 }, methods: { getImg: function(){ var that = this; that.$http({ //調(diào)用接口 method:'GET', url:this.getImgUrl //this指data }).then(function(response){ //接口返回數(shù)據(jù) this.imgList=response.data; },function(error){ }) } } }) </script></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
