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，当这进入“生产”阶段时，我会在本地加载它们，但简单的实验似乎没有什么不同。

我通常不是 Web 开发人员，但我已经使用 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>

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

1 个答案: