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 从接口获取数据的更多相关文章

  1. java接口对接——别人调用我们接口获取数据

    java接口对接——别人调用我们接口获取数据,我们需要在我们系统中开发几个接口,给对方接口规范文档,包括访问我们的接口地址,以及入参名称和格式,还有我们的返回的状态的情况, 接口代码: package ...

  2. 从api接口获取数据-okhttp

    首先先介绍下api接口: API:应用程序接口(API:Application Program Interface) 通常用于数据连接,调用函数提供功能等等... 从api接口获取数据有四种方式:Ht ...

  3. Java之通过接口获取数据并用JDBC存储到数据库中

    最近做数据同步功能,从接口获取数据然后存到数据库中以便后续对数据进行相关操作,下面就贴一下相关代码. import com.alibaba.fastjson.JSON; import com.alib ...

  4. 豆瓣爬虫——通过json接口获取数据

    最近在复习resqusts 爬虫模块,就重新写了一个豆瓣爬虫,这个网页从HTML 源码上来看是没有任何我想要的信息的,如下图所示: 这是网页视图,我在源码中查找影片信息,没有任何信息,如图: 由此我判 ...

  5. 调用REST接口获取数据

    /// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...

  6. Vue事件 定义方法执行方法 获取数据 改变数据 执行方法传值 以及事件对象

    <template> <div id="app"> <!-- <img v-bind:src='url' /> <img :src= ...

  7. vue.js--基础事件定义,获取数据,执行方法传值

    <template> <div id="app"> <h1>{{ msg }}</h1> <br> <button ...

  8. vue 2.0+ 怎么写本地接口获取数据

    在vue-cli脚手架项目中,找到build ---- webpack.dev.conf.js 文件,具体位置如下图: 找到文件后添加下面的内容,写在头部: //这是 webpack.dev.conf ...

  9. PHP访问接口获取数据

    如:http://localhost/operate.php?act=get_user_list&type=json 在这里operate.php相当于一个接口,其中get_user_list ...

随机推荐

  1. 如何用HAProxy+Nginx实现负载均衡

    一.什么是HAProxy HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web站点, ...

  2. redis slot 槽点

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...

  3. 用java代码实现

    用java代码实现(1)珠穆朗玛峰高度为8848米,有一张足够大的纸,厚度为0.001米. (2)请问,我折叠多少次,可以折成珠穆朗玛峰的高度/** * @author 18269 * @date 2 ...

  4. Java架构师告诉你Spring IoC有什么好处呢

    前言: 这个问题也一直困惑我很久,毕竟其他语言没有IOC也活的很好. 但是Spring在当时能够一统江湖,跟IOC真的有很大的关系. 在没有IOC的时代,New代表一切,女朋友都是可以New出来的. ...

  5. 解决yum命令后出现libldap-2.4.so.2: cannot open shared object file

    问题: [root@lgh ~]# yum There was a problem importing one of the Python modules required to run yum. T ...

  6. Tensorflow ARM交叉编译错误集锦

    版权声明:本文为博主(Jimchen)原创文章,未经博主允许不得转载. ttps://www.cnblogs.com/jimchen1218/p/11611975.html 前言: Tensorflo ...

  7. 爬虫保存Cookie

    import http.cookiejar as cookielib session.cookie = cookielib.LWPCookieJar() session.cookie.save(fil ...

  8. Introduction of Machine Learning

    李宏毅主页 台湾大学语音处理实验室 人工智慧.机器学习与深度学习间有什么区别? 人工智能——目标 机器学习——手段 深度学习——机器学习的一种方法 人类设定好的天生本能 Machine Learnin ...

  9. 用python实现新词发现程序——基于凝固度和自由度

    互联网时代,信息产生的数量和传递的速度非常快,语言文字也不断变化更新,新词层出不穷.一个好的新词发现程序对做NLP(自然预言处理)来说是非常重要的. N-Gram加词频 最原始的新词算法莫过于n-gr ...

  10. Java数组复制、遍历、反转

    /* 1.数组长度,直接length 即可! 2.min()/max(),需要调用库! 3.数组的复制 ,遍历复制,或者直接命名相等 即可! 4.数组反转时,直接折中即可!对调两重循环麻烦! */ i ...