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

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

[v-cloak] { display:none; }

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

用法示例：

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

该指令将保留在元素上，直到关联的Vue实例完成编译为止。结合[v-cloak] {display：none}这样的CSS规则，此指令可用于隐藏未编译的胡子绑定，直到Vue实例准备就绪为止。

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

不幸的是，以上两个答案对我不起作用，因为问题是其他原因。由于此问题在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;
}

我遇到了同样的问题，这是由于display我的财产有冲突div。为了解决这个问题，我!important在[v-cloak]as 上使用了标志：

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

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

Vue.js-2.3.4，我在应用容器上添加了v-cloak，在父容器上添加了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

我通过重写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>