關于各種Vue UI框架中加載進度條的正確使用

這里拿MUSE UI 中的進度條舉例

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



//數(shù)據初始化
  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'不顯示頁面
當獲取數(shù)據完畢后
this.isloading = false
進度條消失，頁面顯示

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路