Vue 在隐藏元素之前渲染元素

Question

我有一个非常简单的网站，我使用的是最基本的 Vue。

当我加载网站时，它会在几分之一秒内呈现不应该显示的 div，然后再隐藏它们。它使网站看起来非常不专业。

如果你想体验闪烁div的荣耀，这里是网站：http://sqlforever.com/

在网上环顾四周，我尝试使用v-show、v-if 甚至v-cloak.，它们都不起作用。

这是我使用v-show 和v-cloak 的示例：

<div class="row v-cloak" v-show="display_schema"> 
... 
</div>

v-cloak的定义：

[v-cloak] { display:none; }

Vue 定义：

const app = new Vue({
        el: '#app',
        data: {
          ...
          errorMsg: "",
          warnMsg: "",
          ...
          display_schema: false,
          ...

我在其他地方使用v-if：

      <div class="row">
        <div id = "errorPanel" v-if="errorMsg != ''" class="alert alert-danger alert-dismissible fade show v-cloak" role="alert">
          <strong>ERROR: </strong> {{errorMsg}}
          <!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
        </div>

        <div id = "warnPanel" v-if="warnMsg != ''" class="alert alert-warning alert-dismissible fade show v-cloak" role="alert">
          <strong>WARNING: </strong> {{warnMsg}}
          <!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
        </div>
      </div>

目前我也在从网络上直接加载 css 和 js，当它“生产”时我会在本地加载它们，但简单的实验似乎没有什么不同。

我通常不是网络开发人员，但我使用 knockoutjs 完成了一两个网站，不记得遇到过这个问题。

我做错了什么？

Answer 1

您正在使用 v-cloak 但不正确。来自docs：

该指令将保留在元素上，直到关联的 Vue 实例完成编译。结合 [v-cloak] { display: none } 等 CSS 规则，该指令可用于隐藏未编译的 mustache 绑定，直到 Vue 实例准备好。

这是一个指令，而不是一个类名。您的 CSS 正确地将其样式化为属性：

[v-cloak] { display:none; }

但是你需要在你的模板中应用它作为一个指令，而不是一个类名。例如，这将删除内容的闪存：

<div class="container" id="app" v-cloak>