当前位置: 首页 > 工具软件 > v-page > 使用案例 >

Vue进阶(一):v-loading实现加载效果

尹小云
2023-12-01

原文链接:https://blog.csdn.net/sunhuaqiang1/article/details/95474410

使用v-loading在接口为请求到数据之前,显示加载中,直到请求到数据后消失。

//全局loading
<template>
    <div v-loading="loading"> </div>
</template>

在data 中定义初始化, loading: false,同时在mounted()中将 this.loading设置为true,再去请求接口

在接口的回调函数中,将 this.loading 设为false,到达效果。

如果写在template下的顶层元素上的话,就不会触发全屏loading

//局部loading
<template>
    <div> 
        <section v-loading="loading"></section>
    </div>
</template>


 

 类似资料: