Question

我的页面中有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>&#xe906;</i></a>
  <p v-text="errorMsg"></p>
</div>

如何解决这个问题？

Answer 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实例准备就绪。

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

Answer 2

我遇到了同样的问题，原因是display上的div属性存在冲突。为了解决这个问题，我使用!important上的[v-cloak]标记作为：

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

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

Answer 3

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 4

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

Answer 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>

Answer 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>

Answer 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在vue.js中不起作用？

7 个答案: