vue loading效果

<template>
  <div v-if="isLoading" class="loading">
    <img src="@/assets/loading.gif" alt="Loading..." />
  </div>
  <div v-else>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true, // 控制加载状态的布尔值
    };
  },
  mounted() {
    // 模拟异步操作，2秒后停止加载
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  },
};
</script>

<style scoped>
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-if 指令根据 isLoading 的值来决定是否显示加载动画。
   • 如果 isLoading 为 true，则显示加载动画（通过 <img> 标签引入一张 GIF 图片）。
   • 如果 isLoading 为 false，则显示其他内容。

2. 脚本部分 (<script>):

   • 定义了一个 data 函数，返回一个对象，其中包含 isLoading 属性，初始值为 true。
   • 在 mounted 生命周期钩子中，使用 setTimeout 模拟一个异步操作，2 秒后将 isLoading 设置为 false，从而隐藏加载动画。

3. 样式部分 (<style scoped>):

   • 使用 Flexbox 布局使加载动画居中显示，并设置了高度为视口高度（100vh），确保加载动画在整个页面居中。