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

Linux Überprüfen Sie den Installationsort der Software einfache Methode

1. Überprüfen Sie den Installationspfad der Softw...

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

Vor einiger Zeit habe ich einen Blogbeitrag mit d...

Verwendung von Provide und Inject in Vue3

1. Erklärung von provide und inject Mit „Bereitst...

8 JS reduziert Verwendungsbeispiele und reduzierte Betriebsmethoden

reduce Methode ist eine Array-Iterationsmethode. ...

HTML css js implementiert Tab-Seite Beispielcode

Code kopieren Der Code lautet wie folgt: <html...

Implementierung eines einfachen Rechners mit Javascript

In diesem Artikelbeispiel wird der spezifische Ja...

CSS realisiert den Prozessnavigationseffekt (drei Methoden)

CSS realisiert den Prozessnavigationseffekt. Der ...

Detaillierter Installationsprozess von mysql5.7.21 unter Win10

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

Einführung in die Fuzzy-Abfragemethode mit instr in MySQL

Die Verwendung der internen Funktion instr in MyS...

Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python

Der LIKE-Operator wird in der WHERE-Klausel verwe...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

Einige Schlussfolgerungen zur Gestaltung von Portal-Website-Fokusbildern

Fokusbilder sind eine Möglichkeit, Inhalte zu präs...

So extrahieren Sie Zeichenfolgenelemente aus nicht festen Positionen in MySQL

Vorwort Hinweis: Die Testdatenbankversion ist MyS...