vue如何从接口请求数据
更新时间：2017年06月22日 09:46:07 作者：Kymming
本篇文章主要介绍了vue如何从接口请求数据 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这两天学习了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 还是 React ，都得进行组件间通信。2021-05-05
这篇文章主要介绍了vue结合vue-electron创建应用程序,本文给大家介绍了安装electron有两种方式，两种方式创建的项目结构大不相同，需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
详解如何解决Vue和vue-template-compiler版本之间的问题
这篇文章主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用 JSON.stringify() 列化一个Error,需要的朋友可以参考下2023-10-10
vue中el-table格式化el-table-column内容的三种方法
本文主要介绍了vue中el-table格式化el-table-column内容的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
Vue双向绑定是指数据模型和视图之间的数据同步，通过Object.defineProperty()方法实现数据劫持，利用观察者模式实现数据更新和视图更新的自动同步，实现方式包括指令、计算属性、v-model等，优化方法包括使用虚拟DOM、合理使用computed和watch等2023-04-04
Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)
这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了tdesign和vue的子组件关闭是父组件执行方法,需要的朋友可以参考下2006-06-06
vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解
这篇文章主要介绍了vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解,需要的朋友可以参考下2022-12-12
最新评论