v-cloak 在 vue.js 中不起作用？

Question

我的页面中有一个 div 显示错误 message.When 我刷新页面，它会出现一段时间然后消失。我添加了 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>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

如何解决这个问题？

Answer 1

我通过重写 CSS 并在 CSS 文件中添加 class 解决了这个问题

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>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

Answer 2

只需将此代码包含到您的 css 文件中

[v-cloak] { display:none; }

http://vuejs.org/api/#v-cloak

用法示例：

<div class="xpto" v-cloak>
    Hello
</div>

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

http://vuejs.org/api/#v-cloak

Answer 3

不幸的是，以上 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;
}

Answer 4

Vue.js - 2.3.4，我在应用程序容器上添加了 v-cloak，在父容器，我发现你没有重复保留它的代码 DRY.

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

Answer 5

我遇到了同样的问题，这是由于我的 div 上的 display 属性冲突所致。为了解决它，我在 [v-cloak] 上使用 !important 标志作为：

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

.my-class {
    display: table-cell;
}

Answer 6

如果您使用 CDN 获取 Vue 并使用 Bootstrap CSS 那么原因可能是您正在正文底部加载 Bootstrap CSS标签，将它移回 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>

Answer 7

我有一个场景，我有一个搜索表单，下面是带有 v-if 块的结果，等待提交。

我将 v-if 更改为 v-show，这似乎有所帮助。我尝试了 v-cloak--hidden class 但也没有用（v-cloak 已经设置为 display: none）。 did 的工作显然是将数据结果容器显示样式设置为 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>

v-cloak 在 vue.js 中不起作用？

v-cloak does not work in vue.js?

vue.js