v-cloak 在 vue.js 中不起作用？
Posted
技术标签:
【中文标题】v-cloak 在 vue.js 中不起作用？【英文标题】：v-cloak does not work in vue.js? 【发布时间】：2016-04-24 13:55:30 【问题描述】：我的页面中有一个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>
如何解决这个问题？
【问题讨论】：
Vuejs - Hide vuejs syntax when page loading的可能重复 【参考方案1】：只需将此代码包含到您的 css 文件中
[v-cloak] display:none;
http://vuejs.org/api/#v-cloak
使用示例：
<div class="xpto" v-cloak>
Hello
</div>
该指令将一直保留在元素上，直到关联的 Vue 实例完成编译。结合CSS规则如 [v-cloak] display: none ，这个指令可以用来隐藏 在 Vue 实例准备好之前，未编译的 mustache 绑定。
http://vuejs.org/api/#v-cloak
【讨论】：
我建议将其添加到 CSS 文件的底部。 v-cloak 是一个常规的 CSS，可以被覆盖。因此，如果它不适合您，请检查其他样式是否不强制使用不同的显示属性。或者，禁用 vue 并查看代码是否隐藏。然后 Vue 会使其可见。 如果您的<div> 将display: ... 设置为默认值以外的其他值，这将不起作用。在这种情况下，您可能需要!important，正如 Pleymor 的回答所暗示的那样。【参考方案2】：
我遇到了同样的问题，这是由于我的 div 上的 display 属性冲突。为了解决这个问题，我在[v-cloak] 上使用了!important 标志：
[v-cloak]
display: none !important;
.my-class
display: table-cell;
【讨论】：
【参考方案3】：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 示例：
https://codepen.io/Frontend/pen/RjoKQm【讨论】：
很好的建议。对我来说很有意义。【参考方案4】：我通过重写 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>
【讨论】：
我仍然需要 v-cloak，但这样效果最好。 扩展建议解决方案的有用要点gist.github.com/adamwathan/3584d1904e4f4c36096f【参考方案5】：如果您使用 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>
【讨论】：
【参考方案6】：我有一个搜索表单，下面有一个带有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>
【讨论】：
【参考方案7】：不幸的是，上述 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;
【讨论】：
这个和其他答案对我不起作用，因为我将 v-cloak 与 v-if 结合使用。我需要将所有 v-if 块包装在 中，然后它按记录工作。以上是关于v-cloak 在 vue.js 中不起作用？的主要内容，如果未能解决你的问题，请参考以下文章