How to deal with flickering when v-cloak is loaded in vue

This time I will show you how to deal with the flickering of v-cloak when loading in vue. What are the precautions for v-cloak to flicker when loading in vue. The following is a practical case, let's take a look.

When using vue to bind data, variables will flash when rendering the page. For example,

<p class="#app">
  <p>{{value.name}}</p>
</p>

will see

{{value when loading. .name}}

appears on the page, and it will take a few seconds before the data is rendered. There is an instruction in vue that can solve this problem, v-cloak

Then, v Where should -cloak be placed? Should this instruction be added to every label that needs to render data? After experiments, it was found that v-cloak does not need to be added to every label. It only needs to be added to the label mounted by el. Yes,

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

Moreover, you need to add

[v-cloak] {
  display: none;
}

in the css to prevent the page from flickering.

But sometimes it doesn’t work. There are two possible reasons:

1. The display attribute of v-cloak is overwritten by a higher level, so you need to increase the level

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

2. The style is placed in the css file introduced by @import.

The style of v-cloak does not work when placed in the css file introduced by @import. It can be placed in the css file introduced by link. css file or inline style

Supplement:

##Let’s take a look at the interpretation of v-cloak in Vue

The role and usage of v-cloak

<p id="app">
  {{msg}}
</p>

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

[v-cloak] {
 display: none;
}

<p id="app" v-cloak>
  {{msg}}
</p>

The difference between v-cloak in Vue1. You need to use another p to accommodate the entire page content and instantiate itIn this way, when using v-cloak, you also need to use this method

In actual projects, we often load css files through @import

@import "style.css"
@import "index.css"

In order to avoid this situation, we can write [v-cloak] in the css introduced by link, or write an inline css style, which is solved.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Node.Js to generate a Bitcoin address ( Code attached)

The above is the detailed content of How to deal with flickering when v-cloak is loaded in vue. For more information, please follow other related articles on the PHP Chinese website!