码迷,mamicode.com
首页 > 其他好文 > 详细

例子:Vue 配合 vue-resource 从接口获取数据

时间:2018-03-27 16:37:44      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:blog   app   methods   服务   url   idt   error   图片   console   

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

 

例子:Vue 配合 vue-resource 从接口获取数据

标签:blog   app   methods   服务   url   idt   error   图片   console   

原文地址:https://www.cnblogs.com/lyr1213/p/8657678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!