我的页面中有一个div，用于显示错误消息。当我刷新页面时，它会出现一段时间然后消失。我添加了v-cloak，但它不起作用。
这是代码，showErrorMsg 是假的
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<a href="#" v-on:click="showErrorMsg = false" class="del"><i></i></a>
<p v-text="errorMsg"></p>
</div>
如何解决这个问题？
【问题讨论】：
标签： vue.js
只需将此代码包含到您的 css 文件中
[v-cloak] { display:none; }
使用示例：
<div class="xpto" v-cloak>
Hello
</div>
该指令将一直保留在元素上，直到关联的 Vue 实例完成编译。结合CSS规则如 [v-cloak] { display: none }，这个指令可以用来隐藏 在 Vue 实例准备好之前，未编译的 mustache 绑定。
【讨论】：
<div> 将display: ... 设置为默认值以外的其他值，这将不起作用。在这种情况下，您可能需要!important，正如 Pleymor 的回答所暗示的那样。
我遇到了同样的问题，这是由于我的 div 上的 display 属性冲突。为了解决这个问题，我在[v-cloak] 上使用了!important 标志：
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
【讨论】：
Vue.js - 2.3.4，我在应用容器上添加了v-cloak，在父容器上添加了这个，我发现你没有重复代码保持干燥。
HTML：
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS：
[v-cloak] {
display:none;
}
Codepen 示例：
【讨论】：
我通过重写 CSS 并在 CSS 文件中添加一个类来解决这个问题
CSS：
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML：
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<a href="#" v-on:click="showErrorMsg = false" class="del"><i></i></a>
<p v-text="errorMsg"></p>
</div>
【讨论】：
如果您使用 CDN 获取 Vue 并使用 Bootstrap CSS，那么原因可能是您将 Bootstrap CSS 加载到 body 标签的底部，将其移回 head 标签对我有用。确保将 vueJS 文件原样保留在按钮中。
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
【讨论】：
我有一个搜索表单，下面有一个带有v-if 块的结果，正在等待提交。
我将v-if 更改为v-show，这似乎有所帮助。我尝试了v-cloak--hidden 类，但也没有工作（v-cloak 已经被设置为display: none）。 所做的工作显然是将数据结果容器显示样式设置为无，然后在提交表单时（在processForm 方法中），将显示设置为阻止并显示所有结果。
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
如果没有这种变化，在整个页面刷新时，我可以仍然看到胡须出现。这里是完整的 HTML 页面，经过简化。
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" @submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
【讨论】：
不幸的是，上述 2 个答案对我不起作用，因为问题出在其他问题上。由于这个问题在 Google 上排名第一，我想我会分享我的解决方案。
如果您在某处定义了更具体的显示 CSS 规则，它将破坏 v-cloak 功能。然而！不要绝望 - 只需将其复制到您的 CSS 文件中，它会工作！
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}
【讨论】：