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表单一键提交涉及到,希望遇到的同学少走弯路,加油~
随机推荐
- Spring整合JMS(消息中间件)
这一节来说说,异步机制及spring对JMS封装 一.消息异步处理 类似于RMI.Hessian.Burlap等远程方法调用,它们都是同步的,所谓同步调用就是客户端必须等待操作完成,如果远程服务没有返 ...
- shell脚本57问
[1]交互方式.非交互方式.Shell脚本是什么? 经常与linux打交道,肯定对shell这个词不陌生.不明白shell意思的,可以自行翻译:外壳.去壳. 这个翻译结果怎么可以与计算机系统联系起来呢 ...
- Yaml 的python 应用
1.安装yaml的python包 2.准备yaml的数据 3.yaml.load 解析yaml 3.生产yaml
- [转]python 书籍推荐
原地址: http://python.jobbole.com/85620/ https://github.com/jobbole/awesome-python-books http://blog.cs ...
- jQuery动态加载JS以减少服务器压力
如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页.因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加 ...
- Xcode8:"subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0" 的警告
运行xcode8遇到这个警告: subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_lev ...
- static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
答案:全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式,静态全局变量当然也是静态存储方式. 这两者在存储方式上并无不同.这两者的区别虽在于非静态全 ...
- 大数据学习系列(7)-- hadoop集群搭建
1.配置ssh免登陆 #进入到我的home目录 cd ~/.ssh ssh-keygen -t rsa 执行完这个命令后,会生成两个文件id_rsa(私钥).id_rsa.pub(公钥) 将公钥拷贝到 ...
- HTML元素嵌套关系
- HealthKit详解
1. 导入HealthKit框架 #import <HealthKit/HealthKit.h> 2. 判断设备是否支持HealthKit HealthKit是iOS8加入的API Hea ...