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

Posted 2023-02-23

【中文标题】Vue 在隐藏元素之前渲染元素

【英文标题】：Vue rendering elements before hiding them

【发布时间】：2021-04-05 18:53:37

【问题描述】：

我有一个非常简单的网站，我使用的是最基本的 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 完成了一两个网站，不记得遇到过这个问题。

我做错了什么？

【问题讨论】：

你必须发布更多代码来展示你如何组织你的 vue 页面，如果 divs 的 v-show 最初是 false ，它不能像你描述的那样，首先检查你的变量。

@WildWind 你说得对，我添加了代码示例。

【参考方案1】：

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

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

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

[v-cloak]  display:none; 

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

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

【讨论】：

我认为这可能是问题所在！对其进行更详细的测试，但最初的实验表明问题已解决。