Use V-cloak to prevent Vuejs variable names when page loads occur

Take a look at the code first:

<ul v-for= "Item in Items" >      <li>{{item.name}}</li></ul>

When we refresh the page because the response to the problem will see {{item.name}} This vue.js template variable, so that the user has a bad experience, then how to solve this problem?

The answer is to add one:

V-cloak

The code is as follows:

<ul v-cloak v-for= "item in Items" >     <li>{{item.name}}</li></ul>

and add it to the CSS.

[V-cloak] {     display:none;}

Get!

But what is the principle?

The meaning of this CSS is that HTML tags that contain v-cloak (cloak N. Cloak, Cloak; Vt. Cloaking, masking) properties are hidden when the page is initialized.

After Vuejs instance ready, the V-cloak property is automatically removed, that is, the corresponding label becomes visible.

Use V-cloak to prevent Vuejs variable names when page loads occur