這兩天學習了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="https://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
