Ci-dessous, je partagerai avec vous un article qui résout le problème du code original clignotant sur la page lors de l'utilisation de Vue.js pour afficher des données. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

J'ai commencé à apprendre à utiliser Vue.js aujourd'hui, mais j'ai trouvé un problème pendant le processus d'apprentissage, c'est-à-dire que lorsque la page charge des données, le code d'origine clignote. Vérifiez les informations de toutes les parties et trouvez la solution finale.

La première étape, ajouter un morceau de code CSS

<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style>

La deuxième étape, référencer le CSS sur le module de vue

<p id="app" v-cloak> 
  <h1>{{message}}</h1> 
  <h1>{{name}}</h1> 
</p>

Notez que certains articles disent que v-cloak devrait être ajouté à la section de données spécifique, mais c'est trop gênant et doit être ajouté pour chaque affichage de données, donc le chargement direct du module d'affichage peut résoudre le problème.

La troisième étape, la partie js n'a pas changé

<script type="text/javascript">   
  var exeData = { 
    message : "Hello World", 
    name:"我是Vue" 
  }; 
 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script>

Coller ci-dessous Code complet :

 
 
 
 
 
<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style> 

 
 
   
  
 
    
{{message}}
 
    
{{name}}
 
  
 
 
 
 

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Résoudre le problème du déploiement à chaud ne détectant pas les modifications de fichiers dans Webpack

Problème d'échec de chargement du serveur de développement Webpack

Implémentation de la méthode de configuration de l'accès à distance dans webpack-dev-server

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!