2017-05-11 8 views
1

Ich habe eine v-wenn auf einem Tag <span v-if="someValue">, die ich ausgeblendet werden möchte und nur sichtbar werden, sobald der Wert in someValue auf wahr gesetzt ist. Leider, auch wenn der Wert von Anfang an falsch ist, blinkt sie immer noch beim Laden der Seite (wahrscheinlich bevor Vue Zeit hat, das Tag zu entfernen). Gibt es eine nette Möglichkeit, mit diesem Problem umzugehen?Vue v-wenn Start ausgeblendet

Antwort

3

Das anfängliche "Blinken" bezieht sich nicht auf die v-if.

Es ist aufgrund der Tatsache, dass Sie zuerst laden die Dom und dann vue js wird es "manipulieren". Vue wird nach Ihrem HTML-Markup geladen und Sie werden alles sehen, bis Vue Js endlich geladen ist und Elemente entsprechend Ihrem Code ausblenden.

Um das beheben Sie eine v-cloak Richtlinie auf einer Ihrer äußeren Elemente platzieren und eine CSS wie

[v-cloak].class-of-my-outer-element { 
    display: none; 
} 

die v-Mantel „Attribut“ hinzufügen wird durch vue entfernt werden, nachdem es initialisiert wird. Das bedeutet, dass nichts angezeigt wird, bis der Code fertig ist.

Minor update/edit: Vergiss nicht, dass das v-cover-Element innen sein muss, wenn deine #app oder wo du deine vue-Anwendung mountest.