<!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="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

    <script src="//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>

　　

Vue从接口请求数据的更多相关文章

  1. vue 使用 jsonp 请求数据

    vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...

  2. 利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）

    步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般 ...

  3. vue之axios请求数据本地json

    写给自己的话:静态的json文件要记得放在static文件夹下,想打自己 1.下载插件 npm install axios --save 2.在main.js下引用axios import axios ...

  4. seller vue 编写接口请求【mock数据】

    [build]-[webpack.dev.conf.js] 或 [build]-[dev-server.js] 在webpack.dev.conf.js中的写法 var appData = requi ...

  5. 聊一聊跨域，Vue向Django请求数据的一些问题

    1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...

  6. Vue之resource请求数据

    导入resource文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js& ...

  7. Vue之axios请求数据

    引入文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"> ...

  8. vue.js中请求数据v-for循环使用数据

    1.效果图 2.cart.json { "message":"", "status":"1", "result ...

  9. Vue使用axios请求数据，默认post请求传参是json格式，但后台需要formData格式？？？

    最简单的方式,post请求参数json转formData…代码如下: 使用node的 qs 模块(推荐使用) 就是这么简单,在结合element ui表单一键提交涉及到,希望遇到的同学少走弯路,加油~

随机推荐

  1. 线程池 Future 带返回结果

    package com.aibi.cmdc.bigscreen.action; import java.util.ArrayList; import java.util.HashMap; import ...

  2. Jmeter 03 Jmeter脚本开发

    JMeter 工作区介绍 JMeter Http 协议录制 JMeter 脚本调测 JMeter 关联 JMeter 参数化 JMeter 检查点 JMeter 事务 JMeter 集合点 JMete ...

  3. 【BZOJ4928】第二题 树hash+倍增

    [BZOJ4928]第二题 Description 对于一棵有根树,定义一个点u的k-子树为u的子树中距离u不超过k的部分. 注意,假如u的子树中不存在距离u为k的点,则u的k-子树是不存在的. 定义 ...

  4. [luogu3393]逃离僵尸岛

    [luogu3393]逃离僵尸岛 luogu 先把被禁止的点和新建的虚点n+1连0边 跑最短路,dis<=s的点价格为Q,否则为P, 再建图跑最短路 #define ll long long # ...

  5. 关于Ninja中上传下载文件

    上传得时候 根据类型来判断一下: 然后下载的时候需要:在url的最后一个/ 后面加上你要下载的类型如/download/app.apk; 下载成功就是app.apk了;

  6. ARDUINO W5100 WebClient 测试

    基础工作:W5100扩展板插在ARDUINO上.用网线把W5100和自己家的路由器连接.插上网线能看到侧面网口指示灯变亮.路由器开启DHCP服务(一般都是开启的). 1.打开官方例程里面的Ethern ...

  7. 正确认识 DIV+CSS 概念

    今天看到神采飞扬发表于前端观察的<DIV+CSS 请不要再忽悠人了>,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助.转载过来,共同分享. ...

  8. 斯坦福机器学习视频笔记 Week2 多元线性回归 Linear Regression with Multiple Variables

    相比于week1中讨论的单变量的线性回归,多元线性回归更具有一般性,应用范围也更大,更贴近实际. Multiple Features 上面就是接上次的例子,将房价预测问题进行扩充,添加多个特征(fea ...

  9. python 常用的字符串方法

    st = ' hello Kitty 'str = 'hello {name} {age}' #print(st.format(name='fadfa'))#常用的字符串方法print(st.coun ...

  10. [java]Arrays.copyOf() VS System.arrayCopy()

    If we want to copy an array, we can use either System.arraycopy() or Arrays.copyOf(). In this post, ...