v-cloak does not work in vue.js?

前端未结

关注

 6  1509

There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but

相关标签:

6条回答

悲&欢浪女

2020-12-13 06:40
I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:
```
[v-cloak] {
    display: none !important;
}

.my-class {
    display: table-cell;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

暖寄归人

2020-12-13 06:40

I fixed this problem by rewrite the css

add a class in css file:

[v-cloak] .v-cloak--hidden{
  display: none;
}

then the 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>

0 讨论(0)

被撕碎了的回忆

2020-12-13 06:44
Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.

If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!
```
[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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2020-12-13 06:45
Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.

HTML:
```
<div id="app" v-cloak>
 Anything inside gets the v-cloak
</div>
```
CSS:
```
[v-cloak] {
 display:none;
}
```
Codepen Example:
- https://codepen.io/Frontend/pen/RjoKQm
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-12-13 06:48
If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.
```
<HTML>
<head>
  All link and script tag here
</head>
<body> 
  <div id='app' v-cloak>
    {{ something }}
  </div>
  <script src="app.js"></script>
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
隐瞒了意图╮

2020-12-13 06:49
Just include this code to your css file
```
[v-cloak] { display:none; }
```
http://vuejs.org/api/#v-cloak

Usage example:
```
<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
0 讨论(0)
发布评论:

提交评论
- 加载中...