关于各种Vue UI框架中加载进度条的正确使用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39045645/article/details/100663575

这里拿MUSE UI 中的进度条举例

    <mu-circular-progress :size="40" class="icon" v-if="isloading"/>
    <div v-show="!isloading">
      <p>内容</p>
    </div>

//数据初始化
  data () {
    return {
      isloading: false
    }
  },
 //页面加载之前
 mounted () {
      this.isloading = true
      this.$axios
        .get([
          '/api/playlist/detail?id=' +
            this.$route.params.id
        ])
        .then(response => {
          // success
          // console.log(response.data)
          this.name = response.data.playlist.name
          this.list = response.data.playlist.tracks
          this.isloading = false
        })
        .catch(error => {
          // error
          alert('失败！')
          console.log(error)
        })
    }

页面加载之前this.isloading = true
v-show='false'不显示页面
当获取数据完毕后
this.isloading = false
进度条消失，页面显示

微信公众号：

臻美IT

谢谢大家关注，将不定期的推送给大家精品文章以及开源软件