Comment gérer le scintillement lorsque v-cloak est chargé dans vue

Cette fois, je vais vous montrer comment gérer le scintillement de v-cloak lors du chargement en vue. Quelles sont les précautions à prendre pour que v-cloak scintille lors du chargement en vue. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Lors de l'utilisation de vue pour lier des données, les variables clignoteront lors du rendu de la page. Par exemple,

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

verra

{{value.name}} apparaît sur la page, et les données seront rendues après quelques secondes. Il y a une instruction en vue pour résoudre ce problème, v-cloak

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

[v-cloak] {
  display: none;
}

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

Le style de v-cloak ne fonctionnera pas s'il est placé dans le fichier css introduit par @import. Il peut être placé en lien Dans le fichier CSS importé ou dans le style en ligne

Supplément :

Utilisation :

Cette directive reste sur l'élément jusqu'à ce que l'instance associée termine la compilation. Lorsqu'elle est utilisée avec des règles CSS telles que [v-cloak] { display: none }, cette directive peut masquer les balises Moustache non compilées jusqu'à ce que l'instance soit prête. L'API officielle

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

puis le mot de chargement terminé apparaîtra Afin de rendre l'effet plus évident, nous pouvons retarder le chargement de l'instance Vue

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

[v-cloak] {
 display: none;
}

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

De cette façon, lorsque vous utilisez v-cloak, vous devez également utiliser cette méthode

Dans les projets réels, nous chargeons souvent des fichiers CSS via @import

Et @import ne sera pas chargé tant que la page DOM n'est pas complètement chargée si nous écrivons [v. -cloak] dans le fichier CSS chargé par @import fera encore scintiller la page.

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

Lecture recommandée :

Node.Js pour générer un Bitcoin adresse (Code ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!