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!