Tag Archives: v-cloak

The Usage of v-clock

Summary of v-clock usage

first look at the following code

<ul v-for="item in items">

    <li>{{ item.name }}</li>

</ul>
then, when we use Vue to read data from the background or refresh the page, the response problem may flash{{ item.name }}This one vue.js Template variable, which brings users a bad experience. At this time, v-cloak will come in handy
v-cloak: prevent the variable name of vuejs from appearing during page loading.
method: add v-cloak

to the loading point in HTML

<ul v-cloak v-for="item in items">

     <li>{{ item.name }}</li>

</ul>
and then add

to the CSS

[v-cloak] {

     display: none;

}
explanation: HTML tags containing the v-cloak attribute will be hidden during page initialization.
after vuejs instance ready, the v-cloak attribute will be automatically removed, that is, the corresponding tag will become visible.
then the problem comes again: in actual projects, we usually load the CSS file through @ import
@import "style.css"
the page will not be loaded until the DOM is fully loaded. If we write [v-cloak] in the CSS file loaded by @ import, the page will still flash.
solution: write [v-cloak] in the CSS introduced by link, or write an inline CSS style.

ok!