Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem des Originalcodes löst, der auf der Seite blinkt, wenn Sie Vue.js zum Anzeigen von Daten verwenden. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Ich habe heute angefangen zu lernen, wie man Vue.js verwendet, aber während des Lernprozesses habe ich ein Problem festgestellt, das heißt, wenn die Seite Daten lädt, blinkt der Originalcode. Überprüfen Sie die Informationen aller Parteien und finden Sie die endgültige Lösung.

Fügen Sie im ersten Schritt ein Stück CSS-Code hinzu

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

Im zweiten Schritt verweisen Sie auf das CSS-Modul die Ansicht

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

Beachten Sie, dass in einigen Artikeln empfohlen wird, V-Cloak im spezifischen Datenabschnitt hinzuzufügen, dies ist jedoch zu mühsam und muss für alle Daten hinzugefügt werden Anzeige, also direkt laden Auf dem großen Ansichtsmodul kann das Problem gelöst werden.

Im dritten Schritt hat sich der js-Teil nicht geändert

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

Fügen Sie das Ganze ein Code unten:

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

 
 
   
  
 
    
{{message}}
 
    
{{name}}
 
  
 
 
 
 

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems der Hot-Bereitstellung, bei der Dateiänderungen in Webpack nicht erkannt werden

Hot in Webpack-Entwicklungsserver-Ladefehlerproblem

Implementierung der Fernzugriffskonfigurationsmethode im Webpack-Dev-Server

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Seite blinkt, wenn Vue.js Daten anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!