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

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 阻止渲染，则在安装之前它不会工作，它将首先渲染，以便在安装后隐藏