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

简介: 关于各种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 = truev-show='false'不显示页面 当获取数据完毕后this.isloading = false进度条消失,页面显示



相关文章
|
1天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
78 3
|
1天前
|
缓存 监控 JavaScript
优化策略:提升Vue应用的性能和加载速度
【4月更文挑战第23天】本文探讨了优化Vue应用的策略,包括代码层面(精简代码、组件拆分、计算属性和侦听器)、路由懒加载、数据懒加载与防抖节流、图片和资源压缩及CDN、缓存机制的利用,以及使用Vue Devtools和性能分析工具进行监控与调试。通过这些方法,可以提升Vue应用的性能和加载速度,确保用户获得流畅体验。
|
1天前
Vue3框架中让table合计居中对齐
Vue3框架中让table合计居中对齐
|
1天前
|
缓存 JavaScript 前端开发
vue如何优化首页加载速度
vue如何优化首页加载速度
28 7
|
1天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
20 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
1天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
1天前
|
Web App开发 缓存 JavaScript
优化Vue首页加载速度的实用方法
优化Vue首页加载速度的实用方法
16 1
|
1天前
|
JavaScript
VUE里修改element-ui的显示层次与上下间隔
VUE里修改element-ui的显示层次与上下间隔
12 1
|
1天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
1天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面