<!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. 推荐扔物线的HenCoder Android 开发进阶系列 后期接着更新

    官网地址:http://hencoder.com/ 我来做一次辛勤的搬运工 HenCoder:给高级 Android 工程师的进阶手册 HenCoder Android 开发进阶: 自定义 View ...

  2. java面试的那些事

    跳槽面临的第一个难关那就是面试吧.面试的好坏直接关乎着你年薪的多少.如何顺利完成面试的那些难题,今天我们就从java中复习一下.看看经常面试的知识点,为什么面试这些知识点, 如果你是初级的或刚毕业的j ...

  3. 【入门】创建express项目

    1.创建项目(图解) 2.访问http://localhost:3000/就看到熟悉的页面了 3.查看项目目录     参考文档:http://jingyan.baidu.com/article/92 ...

  4. 安装virtualBox 增强包

    1 在原始操作系统安装. 2 打开USB设置. 3 运行虚拟机中的Linux中,Device->install guest additions 再安装增强包. 4 插入U盘,如果这时可以看到U盘 ...

  5. Redis 配置和使用

    Redis的配置 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者me ...

  6. 15.Django添加一个功能模块的步骤（和SpringMVC类比）

    这里介绍如何在Django里新建一个模块,这个例子还是最简单的例子 通过浏览器访问 http://localhost:8000/hello/然后返回一个欢迎页 我是做java web出身的,这里用py ...

  7. Linux改动hostname的两个办法

    假设你想把主机名改为 linux的话.两中方法: 1. # hostname linux 这样改动了以后马上生效.可是重新启动后就没了 2. # vi /etc/sysconfig/network 改 ...

  8. （转载）《C#高级编程》读书笔记

    C#类型的取值范围 名称 CTS类型 说明 范围 sbyte System.SByte 8位有符号的整数 -128~127(−27−27~27−127−1) short System.Int16 16 ...

  9. 高性能javascript学习总结（3）--数据访问

    在 JavaScript 中,数据存储位置可以对代码整体性能产生重要影响.有四种数据访问类型:直接量,变量,数组项,对象成员.         直接量仅仅代表自己,而不存储于特定位置. JavaScr ...

  10. html5 说明

    # 客户端储存历程 远古时期 cookies的用法和缺陷 userdata   HTML5时代 localstorage application cache 离线缓存 indexedeDB 客户端数据 ...