Vue从接口请求数据
<!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从接口请求数据的更多相关文章
- vue 使用 jsonp 请求数据
vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...
- 利用SPM工具运行自己创建的小组件（使用common-model向后台接口请求数据）
步骤如下: 1.安装依赖:spm install -e 2.编译:spm build (编译好的东西会放在trunk-dist里面) 3.发布:spm app -d (会出来一个export端口,一般 ...
- vue之axios请求数据本地json
写给自己的话:静态的json文件要记得放在static文件夹下,想打自己 1.下载插件 npm install axios --save 2.在main.js下引用axios import axios ...
- seller vue 编写接口请求【mock数据】
[build]-[webpack.dev.conf.js] 或 [build]-[dev-server.js] 在webpack.dev.conf.js中的写法 var appData = requi ...
- 聊一聊跨域，Vue向Django请求数据的一些问题
1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...
- Vue之resource请求数据
导入resource文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js& ...
- Vue之axios请求数据
引入文件 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"> ...
- vue.js中请求数据v-for循环使用数据
1.效果图 2.cart.json { "message":"", "status":"1", "result ...
- Vue使用axios请求数据，默认post请求传参是json格式，但后台需要formData格式？？？
最简单的方式,post请求参数json转formData…代码如下: 使用node的 qs 模块(推荐使用) 就是这么简单,在结合element ui表单一键提交涉及到,希望遇到的同学少走弯路,加油~
随机推荐
- erlang的斐波那契数列
[递归和循环] 题目: 大家都知道斐波那契数列,现在要求输入一个整数N,请输出斐波那契数列的第N项,以及前N项. 如:N <=39 下面是斐波那契数列的实现: -module(feibo). - ...
- Shell Error: -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory (转)
错误原因可能有以下几种: 1.在WIN底下用文本编辑工具修改过参数变量,在保存的时候没注意编码格式造成的, 2.也有可能是在VIM里修改,第一行末尾按到ctrl_v 查看文件是DOS格式.UNIX格式 ...
- 【文献阅读】Deep Residual Learning for Image Recognition--CVPR--2016
最近准备用Resnet来解决问题,于是重读Resnet的paper <Deep Residual Learning for Image Recognition>, 这是何恺明在2016-C ...
- 002android初级篇之ViewPager及PagerSlidingTabStrip listview的使用
002android初级篇之ViewPager及PagerSlidingTabStrip listview的使用 ViewPager ViewPager类直接继承了ViewGroup类,所有它是一个容 ...
- WPF中的数据模板使用方式之一：ContentControl、ContentTemplate和TemplateSelector的使用
在WPF中,数据模板是非常强大的工具,他是一块定义如何显示绑定的对象的XAML标记.有两种类型的控件支持数据模板:(1)内容控件通过ContentTemplate属性支持数据模板:(2)列表控件通过I ...
- Python小白的发展之路之Python基础（三）【函数简介】
目录: 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 4.嵌套函数 5.递归 6.匿名函数 7.函数式编程介绍 8.高阶函数 9.内置函数 1. 函数基本语法及特性 首先我们明确函数是 ...
- 高次同余方程模板BabyStep-GiantStep
/************************************* ---高次同余方程模板BabyStep-GiantStep--- 输入:对于方程A^x=B(mod C),调用BabySt ...
- php的json_encode不兼容JSON_UNESCAPED_UNICODE
//php的json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案 function _json_encode($value) { if (version_compare( ...
- 我的Android进阶之旅------>Android关于ImageSpan和SpannableString的初步了解
最近要实现一个类似QQ聊天输入框,在输入框中可以同时输入文字和表情图像的功能.如下图所示的效果: 为了实现这个效果,先去了解了一下ImageSpan和SpannableString的用法.下面用一个小 ...
- python3 批量缩放图片为iphone5的640*1136以下
try: from PIL import Image, ImageDraw, ImageFont, ImageEnhance except ImportError: import Image, Ima ...