例子:Vue 配合 vue-resource 從接口獲取數據


vue-resource 是 vue 的一個與服務器端通信的 HTTP 插件,用來從服務器端請求數據。

結合例子——圖片列表來寫一下 Vue獲取接口數據。

html :

<div id="app">
    <ul>
        <li>
            <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
        </li>
    </ul>
</div>

vue :

var vm = 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; // promise的then成功之后,將response返回的數據data,保存到imgList數組里
                },function(error){ console.log(error); }) } } })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM