您的位置：首页 > Web前端 > Vue.js

vue如何从接口请求数据

2017-06-22 09:46 761 查看

这两天学习了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-resource调用接口获取数据

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 接口数据

相关文章推荐

新的分享

章节导航