Verhindern, dass Vue.js Klammern auf langsamen Clients anzeigt

Question

Ich habe gerade meine erste Vue.js App gemacht und sie ist großartig. Das einzige Problem, das ich hatte, betrifft die Bindung von Werten bei langsamen Verbindungen.

Zum Beispiel in meinem template habe ich diesen Code:

<div v-for="event in events"> 
    <div class="start_time"> 
     {{ event.start_time_formatted }} 
    </div> 
    <div class="icon_placeholder"> 
     <img v-bind:src="event.icon" alt="Sport Image" /> 
    </div> 
    <div class="event_title"> 
     <a v-bind:href="event.url"> 
      {{ event.title }} 
     </a> 
    </div> 
    <div class="button_placeholder"> 
     <a v-bind:href="event.url" class="btn btn-filled"> 
      Watch 
     </a> 
    </div> 
</div> 

Aber das Problem ist, dass ich dieses Ergebnis zu erhalten, bis alle Vermögenswerte meiner Website geladen werden:

Zum Beispiel B. in AngularJS können Sie Werte mithilfe von Anweisungen binden und verhindern, dass die Klammern angezeigt werden.

Wie erreiche ich diesen Effekt in Vue.js?

Answer 1

v-text sollten Sie mehr eckigen Rendern und und v-cloak kann Ihnen helfen, Vorlage Inhalt ausblenden, bis die Kompilierung für Situationen, in denen Sie Schnurrbart-Tags benötigen abgeschlossen.