關(guān)于各種Vue UI框架中加載進(jìn)度條的正確使用

這里拿MUSE UI 中的進(jìn)度條舉例

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



//數(shù)據(jù)初始化
  data () {
    return {
      isloading: false
    }
  },
 //頁(yè)面加載之前
 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)
        })
    }



頁(yè)面加載之前this.isloading = true
v-show='false'不顯示頁(yè)面
當(dāng)獲取數(shù)據(jù)完畢后
this.isloading = false
進(jìn)度條消失，頁(yè)面顯示

作者：Vam的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路