前端Vue请求接口数据、渲染数据（vue-sourse请求轮播图img、url数据笔记）

```javascript
1.请求接口数据：

//定义一个保存数据的数组
data(){
    return {
        lunbotuList:[]    //保存轮播图的数组
    };
}



created(){
    this.getLunbotu();
},
methods：{

		getLunbotu(){

			this.$http.get('接口').then(result => {

				console.log(result.body);

		})

	}

}

```javascript
methods：{
    
    

		getLunbotu(){
    
    

			this.$http.get('接口').then(result => {
    
    

				//console.log(result.body);
                if(result.body.status ===0){
    
    
                    this.lunbotuList = result.body.message;
                }else{
    
    
                    return '获取接口数据失败'
                }

		})

	}

}

2.数据有了，渲染数据:

//使用v-for来循环数组数据(lunbotuList)

//在vue组件中，使用v-for循环的话，一定要使用key

//布局
img{
    width:100%;
    height:100%;
}