zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Java8 Period.between方法坑及注意事项
    mybatis入门-第一个程序
    mybatis入门-框架原理
    初识servlet--未完成
    初识servlet
    session是什么
    session工作原理简介
    笔记本维修介绍
    j2se 总结
    maven
  • 原文地址:https://www.cnblogs.com/kymming/p/6484626.html
Copyright © 2011-2022 走看看