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!