【通俗易懂】vue中loading功能实现方法

效果图

我是点击后让他出现loading效果。

上代码

<template>
  <div>
    <!-- 重点就是这一句话，v-loading,加在你需要效果的标签上就行了，
    他会自动在你的容器中间出现一层遮罩层并有个转圈的样式 -->
    <div v-loading="show" @click="change" style="height:200px;width:200px">
      123
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    //一般会把v-loading定义一个变量来控制true和false达到操作的效果。
      show:false
    }
  },
  methods:{
    change(){
      this.show=!this.show
    }
  }

}
</script>

没错，这就完成了。就这么简单。一句话v-loading搞定。

当然这是最基础的用法，一般工作中用的比较多的地方是后台管理系统中的表格之类的数据比较多的地方加在会放一个，因为数据多比较慢，放个loading图让用户体验更好。
一般常用的做法是这样的：

<template>
  <div>
    <div v-loading="show" @click="change" style="height:200px;width:200px">
      这是一个表格，我现在要点击获取数据了
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      show:false
    }
  },
  methods:{
  //获取数据的方法
    change(){
    //先让loading图显示出来给用户看，避免你加载的慢的话，程序没走完，
    //用户看着一个空白页还以为你网页坏了呢。给个loading让用户知道你在缓冲
      this.show=true
      //然后开始发请求接口拿数据
      this.$http({})
      //这时候数据那到了，那就可以显示出来了，那我们就关闭loading效果正常显示表格
      this.show=false
    }
  }
这就是最常用的一个表格loading写法。
}
</script>