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