Vue-Direktiven v-html und v-text

Vue-Direktiven v-html und v-text

1. Anweisungen zum Rendern von V-Text-Text

(Kann nur Text rendern, keine Beschriftungen)


<div id="test">

        <p v-text="Nachricht"></p>

 </div>

 <script src="./js/vue.js"></script>

 <Skript>
    const vm = neuer Vue({

            el:"#test",

            Daten:{

                Nachricht: „<h2>Hallo Vue</h2>“

            }

        })

 </Skript>

Die Ausgabe ist:

2. v-html

(Kann Anweisungen rendern, kann Tags rendern)


<div id="test">

        <p v-html="Nachricht"></p>

 </div>

 <script src="./js/vue.js"></script>

 <Skript>

    const vm = neuer Vue({

            el:"#test",

            Daten:{

                Nachricht: „<h2>Hallo Vue</h2>“

            }

        }) 

 </Skript>

Die Ausgabe ist:

Dies ist das Ende dieses Artikels über die Vue-Direktiven v-html und v-text. Weitere verwandte v-html- und v-text-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Beispiele für Vue-Anweisungen: v-cloak, v-text, v-html
  • Detaillierte Erklärung der Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue
  • 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

<<:  Detaillierte Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen

>>:  Verwenden Sie js in html, um die lokale Systemzeit abzurufen

Artikel empfehlen

CSS-Beispielcode mit Suchnavigationsleiste

Dieser Artikel zeigt Ihnen, wie Sie mit CSS eine ...

Vue implementiert die Drag & Drop-Funktion für Bilder

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js

Konvertierung des Zeitformats von Montag auf Sonn...

Lösung für das Problem des MySQL-Datenverzögerungssprungs

Heute haben wir ein weiteres typisches Problem im...

Node.js+Postman zur Simulation der HTTP-Server- und Client-Interaktion

Inhaltsverzeichnis 1. Node erstellt HTTP-Server 2...

Implementierung des Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL

In MySQL können alle Felder der Typen char, varch...

Tutorial zur Installation von MySQL 8.0.18 unter Windows (Community Edition)

In diesem Artikel wird kurz die Installation von ...

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Szenario Das Unternehmensprojekt wird in Docker b...

Detaillierte Erläuterung der Kernkonzepte und Fälle von webpack-dev-server

Kernkonzepte von webpack-dev-server Webpacks Cont...

Schreiben und Verstehen von Pfeilfunktionen und diesem in JS

Inhaltsverzeichnis Vorwort 1. So schreiben Sie Fu...

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Hier ist zu Ihrer Information eine Vue-Single-Sig...

So stellen Sie per SSH eine Verbindung zum Docker-Server her

Als ich zum ersten Mal mit Docker in Berührung ka...

Ein kurzer Vortrag über den Diff-Algorithmus in Vue

Inhaltsverzeichnis Überblick Virtueller Dom Prinz...