Vue进阶（六十一）：v-loading实现加载效果

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

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

  

 

  
1
  
2
  
3
  
4
 

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

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/95474410