网页加载完之前显示loading，vue怎么写

在 Vue 中，可以使用 v-if 指令和 data 中的变量来实现加载动画的显示和隐藏。以下是一个简单的示例：

<template>
  <div>
    <div v-if="loading" class="loading">
      <!-- 这里可以插入你想要的加载动画 -->
      Loading...
    </div>
    <div v-else>
      <!-- 这里是页面主体内容 -->
      <!-- 可以在这里放置你想要展示给用户的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true, // 初始化时设置为 true
    };
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false; // 数据加载完成后，将 loading 设置为 false
    }, 3000);
  },
};
</script>

<style>
.loading {
  /* 这里可以添加一些样式，比如居中显示 */
  text-align: center;
  font-size: 24px;
  margin-top: 100px;
}
</style>

在上面的代码中，模拟了一个数据加载的过程。mounted 钩子函数会在组件挂载后执行，我们在这里通过 setTimeout 模拟了一个 3 秒钟的数据加载过程。在数据加载期间，loading 变量为 true，因此加载动画会显示出来。在数据加载完成后，我们将 loading 设置为 false，加载动画会消失，页面主体内容会显示出来。