数据加载出来之前显示loading...

element ui 的v-loading使用的是这个样式，背景颜色和字体颜色可以自行更改。

v-loading绑定你的变量名

element-loading-text加载文案

element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值

数据加载之前显示loading

数据code不为0 显示异常

接口返回空 数据显示暂无数据

接口返回值 正常循环展示

<template>
	<div>
        <!--简单的文字提示用这个-->
        <div v-if="loading">疯狂加载中...<div>
        
        <!--使用elementui的组件用这个-->
        <div v-if="loading" v-loading="loading"
                            element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.8)">
		</div>

        <!--数据异常-->
        <div v-else-if="abnormal">
        	<img src="#" />
            <div>数据异常,请稍后再试</div>
        </div>

        <!--接口请求过但无数据-->
        <div v-else-if="list.length===0">暂无数据</div>

        <!--正常循环展示数据-->
        <div class="info" v-else="list.length > 0">
            <div class="info-item" v-for="(item,index) in list" :key="index">
              <span class="info-item-label">{{item.label}}</span>
              <span class="info-item-value">{{item.value}}</span>
            </div>
        </div>
        
    </div>
</template>

export default {
	data() {
    	return {
        	loading: false,
        	list: [],
        	abnormal: false,
        }
    },
    mounted() {
    	this.getList();
    },
    methods: {
    
    	this.loading = true;
        
    	//请求api
        getList() {
        
        	let data = {
            	page: 1,
                size: 1,
            }
            
        	getList(data).then((response) => {
            
                    if(response.data.code === 0) {
                        this.list = response.data.data;
                        this.loading = false;//请求完毕 loading设置为false
                        this.abnormal = false;
                    } else {
                        this.abnormal = true;//异常
                    }
                
                }
            	
            }).catch((err) => {
            	console.log("err: ",err);
                
                this.loading =  false;//请求完毕 loading设置为false
            })
        }
    },
}