Vue从接口请求数据

最新推荐文章于 2024-11-18 10:44:02 发布

转载最新推荐文章于 2024-11-18 10:44:02 发布 · 685 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kymming/p/6484626.html

文章标签：

#javascript #开发工具 #ViewUI

本文介绍如何使用Vue.js和vue-resource加载并展示图片列表。通过HTTP GET请求从服务器获取图片URL列表，并将其显示在一个动态生成的图片列表中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

转载于:https://www.cnblogs.com/kymming/p/6484626.html