<!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. readonly const关键字

    readonly 关键字与 const 关键字不同. const 字段只能在该字段的声明中初始化. readonly 字段可以在声明或构造函数中初始化. 因此,根据所使用的构造函数,readonly  ...

  2. 嵌入式开发之qt socket--- qt 封装的socket demo

    http://wuyuans.com/2013/03/qt-socket/ http://blog.chinaunix.net/uid-22480862-id-388253.html

  3. vue实践---vue动态加载组件

    开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...

  4. 查看文档的后几行命令：tail

    假如有一个文件test.txt,内容如下: [root@lee ~]# cat test.txt 这是第1行 这是第2行 这是第3行 这是第4行 这是第5行 这是第6行 这是第7行 这是第8行 这是第 ...

  5. The following classes could not be found: - android.support.v7.internal.widget.ActionBarOverlayLayout

    升级android-studio之后,出现这个问题,一直解决不了. 无意间,在布局文件的Design界面中,修改原来的AppTheme为Base.Theme.AppCompat就修复了此问题. 暂时不 ...

  6. iPhone 和 iPad的ios 开发中 利用 WebViewJavascriptBridge组件，通过 UIWebView 对Html进行双向通讯

    本文转载至 http://blog.csdn.net/remote_roamer/article/details/7261490 WebViewJavascriptBridge 项目的 官网 http ...

  7. openssl将私钥和crt证书合成pfx证书

    pfx是什么文件:公钥加密技术12号标准(Public Key Cryptography Standards #12,PKCS#12)为存储和传输用户或服务器私钥.公钥和证书指定了一个可移植的格式.它 ...

  8. [Tjoi2018]数学计算

    [Tjoi2018]数学计算 BZOJ luogu 线段树分治 是不是想问为什么不暴力做? 模数没说是质数,所以不一定有逆元. 然后就是要每次build一下把线段树权值init成1, 博猪不知道为什么 ...

  9. sublime 快捷键,左菜单乱码

    sublime 快捷键安装 packagecontrol https://packagecontrol.io/installation#st3 import urllib.request,os,has ...

  10. TextView属性

    TextView及其子类,当字符内容太长显示不下时可以省略号代替未显示的字符:省略号可以在显示区域的起始,中间,结束位置,或者以跑马灯的方式显示文字(textview的状态为被选中). 其实现只需在x ...