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

Wichtige Bonuselemente zur Optimierung und Verpackung des Frontends von Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Routing von Lazy Lo...

Einführung in Jenkins und wie man Jenkins mit Docker bereitstellt

1. Verwandte Konzepte 1.1 Jenkins-Konzepte: Jenki...

Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy

Lassen Sie uns nun mehrere Situationen zur Steuer...

XHTML: Rahmenstruktur-Tag

Rahmenstruktur-Tag <frameset></frameset&...

IDEA-Konfigurationsprozess von Docker

IDEA ist das am häufigsten verwendete Entwicklung...

Detaillierte Erklärung langsamer MySQL-Abfragen

Informationen zu MySQL-Vorgängen abfragen Status ...

Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?

Programmierer müssen sich viel mit MySQL befassen...

Untersuchung der Eingabetastenfunktion vom Typ „Datei“

<br />Beim Hochladen auf manchen Websites wi...

Wird der Index durch MySQL ungültig?

Wird MySQLs IN den Index ungültig machen? Gewohnh...

Detaillierter Installationsprozess von mysql5.7.21 unter Win10

In diesem Artikel erfahren Sie mehr über die Inst...

Eine kurze Analyse der Crontab-Aufgabenplanung in Linux

1. Erstellen Sie eine Planungsaufgabe Anweisung c...

Detaillierte Schritte zum Portieren von Busybox zum Erstellen eines minimalen Root-Dateisystems

Busybox: Ein Schweizer Taschenmesser voller klein...

Detaillierte Erklärung der jQuery-Kettenaufrufe

Inhaltsverzeichnis Kettenanrufe Ein kleiner Koffe...

JS implementiert die zufällige Generierung von Bestätigungscodes

In diesem Artikelbeispiel wird der spezifische JS...

Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Berechnung des Boxmodells <br />Rand + Rahme...