At the forefront of

During project development, it is often encountered that some tags of vUE will flash when data is loaded, and then disappear after data is loaded. At this time, v-cloak mentioned in the official website is needed to solve the problem.

Let me start with a common situation.

Step1, encountered when loading{{value.name}}Flicker, because that’s what you wrote in the rendering<p>{{value.name}}</p>
Step2: load an empty box with nothing in it because you wrote it in the rendering<p v-html="value.name"></p>

The solution

The cloak does not need to be added to each of the tags at the time of its rendering. Just add it to the tag at the time of the EL cloak

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>
Copy the code

Then, in the CSS, add

[v-cloak] {
    display: none;
}
Copy the code

This prevents the page from flickering.

But sometimes it doesn’t work for two possible reasons:

The display property of the V-cloak is overwritten by the higher-level one, so the level must be increased

[v-cloak] { display: none ! important; }Copy the code

V-cloak does not work with the @import CSS file. It can be placed in the link CSS file or inline style