时间戳

首页 > 解决方案 > v-cloak 在加载页面时不会隐藏组件

vue.js - v-cloak 在加载页面时不会隐藏组件

问题描述

我无法让 v-cloak 在我的应用程序中工作。正如您在此处看到的，组件在 vue.js 完成加载之前被加载（在此示例中，我点击了几次 Reload 以突出显示问题）。

我的实现：

<body>
<div id='myapp' v-cloak>

我的 CSS：

[v-cloak] {
display: none !important;
}

}

到目前为止我尝试了什么：

没有任何效果。有任何想法吗？

标签： vue.jsvuejs2

解决方案

我认为您只是误解了v-cloak 的作用：

该指令将保留在元素上，直到关联的 Vue 实例完成编译。

这里重要的词是编译——这意味着它只适用于在运行时编译的 DOM 模板。它与组件加载无关（例如要显示的一些数据）

如果您使用的是 Vue 3，则有一个特殊的组件，称为suspense。在 Vue 2 中，您必须自己完成v-if或v-show...即根据数据是否已加载来隐藏或显示您的组件。或者使用Vue-Promised的 3rd 方解决方案

推荐阅读