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

Detaillierte Erklärung zur Installation von mysql5.6 aus einem Binärinstallationspaket in einer CentOS7-Umgebung

Dieser Artikel beschreibt, wie mysql5.6 mithilfe ...

Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008

Upgrade-Hintergrund: Um die Sicherheitslücke in d...

HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion

Inhaltsverzeichnis Vorwort: erreichen: Zusammenfa...

Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana

Überblick Prometheus ist ein Open-Source-Dienstüb...

Zusammenfassung des Wissens zum Vue V-Modell

​v-model ist eine Vue-Direktive, die eine bidirek...

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Keepalived+Nginx+Tomcat zur Erzielung eines hochv...

So stellen Sie ein SpringBoot-Projekt mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...

Zusammenfassung der unbekannten Verwendung von "!" in Linux

Vorwort Tatsächlich gibt es für das bescheidene „...

Lösung zum Verlassen von Lücken zwischen BootStrap-Rastern

Inhaltsverzeichnis [Siehe ein Beispiel]: [Der urs...

Aufbau der Angular-Umgebung und einfache Erfahrungszusammenfassung

Einführung in Angular Angular ist ein von Google ...

Beispiel-Tutorial zur JavaScript-Typerkennungsmethode

Vorwort JavaScript ist eine der am häufigsten ver...

Zusammenfassung der Wissenspunkte im Zusammenhang mit Null (IFNULL, COALESCE und NULLIF) in MySQL

Dieser Artikel erläutert anhand von Beispielen di...

So erstellen und implementieren Sie ein Node-Projekt mit Docker

Inhaltsverzeichnis Was ist Docker Clientseitiger ...

Bringen Sie Ihnen den detaillierten Prozess der Installation von DOClever mit Docker Compose bei

Inhaltsverzeichnis 1. Was ist Docker Compose und ...

Wie verfolgt Vue Datenänderungen?

Inhaltsverzeichnis Hintergrund Beispiel Missverst...