Vue Tip: Display Raw HTML
The double mustaches {{ text }} interprets the data as plain text, not HTML:
<p>Using text interpolation: {{ rawHtml }}</p>In order to output real HTML, you will need to use the v-html directive:
<p>Using v-html directive: <span v-html="rawHtml"></span></p>The contents of the span will be interpreted as plain HTML and all data bindings are ignored.
We cannot use v-html to compose template partials, because Vue is not a string-based templating engine.
Instead, components are preferred as the fundamental unit for UI reuse and composition.
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.
If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.
Alternatively (or additionally), you can also subscribe to my newsletter.
Vue Tip: Scroll to Top When Navigating to a New Route
Vue Tip: Automatic Global Registration of Base Components
Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?
Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!
Ändern auf Github