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

这里拿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
进度条消失，页面显示

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路