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

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,我在app容器上添加了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

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>