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之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。这篇文章主要介绍了vue项目中mock.js的使用,需要的朋友可以参考下2019-05-05
Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法
本文主要介绍了Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
在开发基于Vue.js的应用时,随着项目规模的扩大,单个文件的体积也会随之增长,特别是当涉及到大量的依赖库和复杂的业务逻辑时,本文将详细介绍如何使用Webpack来优化Vue项目的打包流程,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了vue搭建多页面多系统应用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-08-08
纯前端使用Vue3上传文件到minio文件服务器(粘贴可直接用)
vue是目前最流行的前端框架,下面这篇文章主要给大家介绍了关于纯前端使用Vue3上传文件到minio文件服务器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
图片预览插件vue-photo-preview的使用示例详解
这篇文章主要介绍了图片预览插件vue-photo-preview的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
在Vue项目开发中,数据可视化是一项重要的任务,Echarts是一个由百度开源的数据可视化库,提供了丰富的图表类型和强大的交互功能,其中,K线图常用于展示金融数据的走势,本文将详细介绍如何在Vue项目中引入Echarts并绘制K线图,需要的朋友可以参考下2025-04-04
最新评论