Detaillierte Erklärung der Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue

Detaillierte Erklärung der Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue
  • { {}} Holen Sie sich den Wert, der ursprüngliche Inhalt des Tags wird nicht gelöscht
  • v-text ruft den Wert ab, wodurch der ursprüngliche Inhalt des Tags gelöscht und einfacher Text ausgegeben wird
  • v-html ruft den Wert ab und löscht den ursprünglichen Inhalt des Tags. Wenn die Daten HTML-Tags enthalten, werden sie analysiert und als HTML-Tags ausgegeben.
<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="app">

    <p>Guten Morgen {{info}}</p>
    <p v-text="info">Guten Morgen</p>
    <p v-html="info">Guten Morgen</p>
    <hr>
    <p v-text="Adresse">hhh</p>
    <p v-html="Adresse">hhh</p>
    <hr>
    <p v-text="addr2">hhh</p>
    <p v-html="addr2">hhh</p>
</div>

</body>
</html>
<script src="js/vue.js"></script>
<Skript>
    neuer Vue({
        el:"#app",
        Daten:{
            info:"gut",
            Adresse: „<a href='https://www.baidu.com'>Klicken Sie hier, um Baidu aufzurufen</a>“,
            Adresse2: '<a href="https://www.baidu.com" rel="external nofollow" >Baidu</a>'
        }
    });
</Skript>

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels über die Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue. Weitere relevante Inhalte zu den Unterschieden und Anwendungen von {{}}, v-text und v-html in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Beispiele für Vue-Anweisungen: v-cloak, v-text, v-html
  • Detaillierte Codebeispiele zur Verwendung von v-text / v-html in vue
  • Vue verhindert das Blinken geschweifter Klammern {{}} in v-text und v-html, Anwendungsbeispiele für v-cloak
  • Vue-Lernhinweise: Detaillierte Erklärung von v-text && v-html && v-bind
  • Vue-Direktiven v-html und v-text

<<:  Detaillierte Erklärung zum Erstellen einer MySQL-Master-Slave-Umgebung mit Docker

>>:  Lösen Sie das Problem, dass Navicat beim Importieren der SQL-Datenbankdatenstruktur den Fehler datetime(0) meldet.

Artikel empfehlen

Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung

Hier habe ich hauptsächlich einige häufig verwend...

Nginx-Praxis zur Optimierung hoher Parallelität

1. Notwendigkeit des Tunings Ich habe mich immer ...

Erstellen einer LEMP-Umgebung (Linux+Nginx+MySQL+PHP) unter CentOS 8.1 (Details zum Tutorial)

Inhaltsverzeichnis Schritt 1: Pakete unter CentOS...

Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

Welche Produkte möchten Sie erwähnen? Vor kurzem ...

So löschen Sie Standardformate und legen allgemeine Formate in CSS fest

CSS Standard-Stile löschen Die üblichen klaren St...

Galeriefunktion durch natives Js implementiert

Inhaltsverzeichnis Der erste Der Zweite Native Js...

CSS3-Radarscan-Kartenbeispielcode

Verwenden Sie CSS3, um coole Radar-Scan-Bilder zu...

Sekundäre Kapselung des Elements el-table table (mit Tischhöhenanpassung)

Vorwort Während meines Praktikums in der Firma ha...

Django-Online-Bereitstellungsmethode von Apache

Umfeld: 1. Windows Server 2016 Datacenter 64-Bit ...

Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs

Inhaltsverzeichnis 1. Einführung in Gojs 2. Gojs ...

Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben

Melden Sie sich bei Ihrem Konto an export DOCKER_...

JavaScript implementiert das Topfschlagen-Spiel von Gray Wolf

1. Projektdokumente 2. Verwenden Sie HTML und CSS...

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Laden Sie zunächst das Installationspaket von der...

Warum kann das in HTML eingebettete Video im MP4-Format nicht abgespielt werden?

Der folgende Code befindet sich in meiner test.htm...

Verwenden Sie „overflow: hidden“, um Seiten-Bildlaufleisten zu deaktivieren

Code kopieren Der Code lautet wie folgt: html { Ü...