v-cloak does not work in vue.js?

Question

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 it doesn't work.

this is the code, showErrorMsg is false

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

How to fix this?

Answer 1

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