Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

Der Unterschied zwischen Vue-Interpolationsausdruck und V-Text-Direktive

{{message}} Syntax kann nur im Tag-Inhalt verwendet werden

{{}} Diese Syntax wird als Interpolationsausdruck bezeichnet. Sie können jeden gültigen JS-Ausdruck in den Interpolationsausdruck schreiben.

1. Verwenden Sie Plugin-Ausdrücke

Bei der Verwendung von Plugin-Ausdrücken gibt es ein Inhaltsflimmerproblem, bei v-text hingegen nicht

<div id="app">

    <p>

        {{Nachricht}}

    </p>
   <p v-text="Nachricht"></p>

</div>

<script src="./js/vue.js"></script>
<Skript>

    lass vm = neues Vue({

        el:"#app",  

        Daten:{ 

        Nachricht: „Hallo Vue“

    }

    })

</Skript>

Wenn im obigen Code die Ausgabe normal ist, ist das Ergebnis konsistent.

Wenn die Netzwerkgeschwindigkeit jedoch langsam ist, wird der Plugin-Ausdruck zuerst auf der Seite ausgegeben.

{{Nachricht}}

Die Seite wird dann normal gerendert, was für die Benutzererfahrung nicht gut genug ist.

2. Verwenden Sie V-Cloak in Plugin-Ausdrücken, um das Flackerproblem zu lösen

<Stil>

    [v-Umhang]:



    Anzeige: keine;

}

</Stil>

<div id="app">

    <p v-Umhang>

        {{Nachricht}}

    </p>

    <p v-text="Nachricht"></p>

</div>

<script src="./js/vue.js"></script>

Wir können das v-cloak -Attribut verwenden, um es zur Laufzeit zu verbergen, aber vue löscht v-cloak -Attribut am Ende des Laufs automatisch.

Mit dieser Methode lässt sich das Flackerproblem lösen

3. Plugin-Ausdruck

Plugin-Ausdrücke fügen nur Inhalt ein und überschreiben nicht den Originalinhalt, während v-text den Originalinhalt überschreibt.

<div id="app">

    <p>

        ----{{Nachricht}}----

    </p>

    //----hallo vue----

    <p v-text="Nachricht">1234556</p>

    // hallo vue

</div>

<script src="./js/vue.js"></script>
<Skript>

    lass vm = neues Vue({

        el:"#app",

         Daten:{
       Nachricht: „Hallo Vue“
    }
    })

</Skript>

Dies ist das Ende dieses Artikels über den Unterschied zwischen Vue-Interpolationsausdrücken und V-Text-Direktiven. Weitere Informationen zum Unterschied zwischen Vue-Interpolationsausdrücken und V-Text-Direktiven finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Wie löst Vue das Problem des Flackerns von Interpolationsausdrücken beim Laden von Daten?
  • Eine kurze Einführung in den Vue-Interpolationsausdruck Mustache
  • Zusammenfassung der Kenntnisse zu Vue-Interpolation, Ausdrücken, Trennzeichen und Anweisungen
  • Ursachen und Lösungen für Blinken durch v-if/v-show/Interpolationsausdrücke in Vue
  • Detaillierte Erklärung der Interpolationsausdrücke in der Vue-Grundsyntax

<<:  Lösen Sie das Problem „Rand: oberer Kollaps“ in CCS

>>:  Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Artikel empfehlen

Einige Erfahrungen in der Selbstkultivierung von Künstlern

Da der Einfluss des Unternehmens wächst und seine...

So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue

Vorwort Vor kurzem bin ich auf ein interessantes ...

Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu

1. Nehmen Sie nginx als Beispiel Nginx mit dem Be...

So erlauben Sie allen Hosts den Zugriff auf MySQL

1. Ändern Sie den Host-Feldwert eines Datensatzes...

5 Möglichkeiten zum Senden von E-Mails in der Linux-Befehlszeile (empfohlen)

Wenn Sie eine E-Mail in einem Shell-Skript erstel...

Anwendungsbeispiele für die virtuelle Liste des WeChat-Applets

Inhaltsverzeichnis Vorwort Was ist eine virtuelle...

Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

Inhaltsverzeichnis Nachdem Sie einen Container lo...

Detaillierte Anwendungsfälle von MySql Escape

MySQL-Escape Escape bedeutet die ursprüngliche Se...

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

Inhaltsverzeichnis 1. Kommunikationsmethode zwisc...

HTML-Tabellen-Markup-Tutorial (14): Tabellenkopf

<br />In der HTML-Sprache können Sie der Tab...