Cette fois, je vais vous montrer comment gérer le clignotement de v-cloak dans Vue lors du rafraîchissement et du chargement. Quelles sont les précautions pour gérer le clignotement de v-cloak dans Vue lors du rafraîchissement et du chargement. chargement Voici le combat réel. Jetons un coup d’œil au cas.
Lorsque vous utilisez vue pour lier des données, la variable clignotera lors du rendu de la page. Par exemple,
<p class="#app">
<p>{{value.name}}</p>
</p>verra
{{value.name}}
<p class="#app" v-cloak>
<p>{{value.name}}</p>
</p>[v-cloak] {
display: none;
}de v-cloak est écrasé par un attribut de niveau supérieur. il faut donc augmenter le niveau
[v-cloak] {
display: none !important;
}Supplémentaire :
Jetons un coup d'œil à Vue ci-dessous Interprétation de v-cloakLe rôle et l'utilisation de v-cloak
Utilisation :
Cette directive reste sur l'élément jusqu'à la fin de la compilation de l'instance associée. 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
HTML lie l'instance Vue, qui clignotera lors du chargement de la page<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
v-cloak peut résoudre ce problème. AjoutezsetTimeout(() => {
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
Pourquoi le v-cloak que j'utilise ne fonctionne-t-il pas ?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.
Afin d'éviter cette situation, nous pouvons écrire [v-cloak] dans le css introduit par le lien, ou écrire un style css en ligne, qui est résolu. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !@import "style.css" @import "index.css"
Lecture recommandée :
Explication détaillée de l'utilisation des fonctions du décorateur JSvue.js+element-ui pour implémenter l'arborescence
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
