About v-clock

v-clock usage summary

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 vue.js template variable {{item.name}} may flash due to response problems, which brings a bad experience to users , this is where v-cloak comes in handy

v-cloak: Prevent vuejs variable names from appearing on page load.

Method: add v-cloak to the load point in html

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

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

</ul>

then add in css

[v-cloak] {

     display: none;

}

Explanation: The html tag containing the v-cloak attribute will be hidden when the page is initialized.

After the vuejs instance is ready, the v-cloak attribute will be automatically removed, that is, the corresponding label will become visible.

Then the problem comes again: in actual projects, we generally load css files through @import

@import "style.css"

It will not load until the page DOM is fully loaded. If we write [v-cloak] in the css file loaded by @import , the page will still flicker.

Solution: write [v-cloak] in the css introduced by the link, or write an inline css style.

ok!