有没有办法隐藏页面的所有内容并仅在页面完全加载后才显示它们？

Question

我正在尝试隐藏我的登录模板，直到加载完所有内容。现在发生的事情是，当我进入我的网站时，会加载模板，然后是我的字体等等。我不想向用户显示任何内容，直到我可以显示包含所有字体、图像和所有内容的页面。我已经尝试过使用 v-show、v-if，但是没有用。我也使用mountedwith this.$nextTick = false，但没有成功。Busy 是我想用来控制页面是否可以显示的变量。这是我的 div：<div class="background kt-grid kt-grid--ver kt-grid--root kt-page" v-if="!busy">这是我的脚本/导出默认值：mounted: function(){    this.$nextTick( function() {        this.busy = false;    })}我希望只有在页面完全加载后才能看到该 div 中的所有内容。

Answer 1

你可以这样做：使用初始化你不想显示的样式

<div :display="yourStyleObject">example</div>

在您的样式对象中，您可以传递如下内容：

yourStyleObject: {

display: 'none';

}

然后，在 mount() 函数中，您将数据的值从 修改display: 'none'为display: 'block'

如果您尝试使用 v-if 阻止渲染，则在安装之前它不会工作，它将首先渲染，以便在安装后隐藏