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

Docker5 - Vollfunktionaler Hafenlager-Bauprozess

Harbor ist ein Registry-Server auf Unternehmenseb...

Verstehen Sie JavaScript-Prototypen und Prototypenketten gründlich

Inhaltsverzeichnis Vorwort Den Grundstein legen P...

js konvertiert ein mehrdimensionales Array in ein eindimensionales Array und ordnet es dann neu

Inhaltsverzeichnis Lassen Sie uns zunächst über d...

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

Inhaltsverzeichnis 1. Konzept Speicherverwaltungs...

Implementierungsbeispiel für die Message Board-Funktion von Node.js+Express

Inhaltsverzeichnis Nachrichtenbrett Erforderliche...

27 Linux-Befehle zum Bearbeiten von Dokumenten, die es wert sind, gesammelt zu werden

Linux-Befehl „col“ Der Linux-Befehl col wird zum ...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Detaillierte Erklärung des Parameters slave_exec_mode in MySQL

Heute habe ich zufällig den Parameter slave_exec_...

Beispielcode zur Konvertierung von http in https mit nginx

Ich schreibe gerade ein kleines Programm. Da die ...

Implementierung der Nginx-Flusskontrolle und Zugriffskontrolle

Nginx-Verkehrskontrolle Die Ratenbegrenzung ist e...

Lernen Sie, benutzerdefinierte Hooks in React zu erstellen

1. Was sind benutzerdefinierte Hooks Wiederverwen...

Detaillierte Erläuterung der MySQL-Datenbankisolationsebene und des MVCC

Inhaltsverzeichnis 1. Isolationsstufe LESEN SIE U...

So entwerfen und optimieren Sie MySQL-Indizes

Inhaltsverzeichnis Was ist ein Index? Prinzip der...

MySQL-Limit-Leistungsanalyse und -Optimierung

1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

In diesem Artikel wird der spezifische Code von j...