Vue3 v-html-Direktive
Vue3 Eingebaute Direktivenv-htmlDie Direktive wird verwendet, um das innerHTML des Elements zu aktualisieren, wodurch der Inhalt als rohes HTML gerendert wird.
Grundlegende Beschreibung
v-htmlDie Direktive fügt den Wert des gebundenen Ausdrucks als HTML in das Element ein. Dies ist sehr nützlich, wenn Rich-Text-Inhalte gerendert werden müssen.
- Erwarteter Typ: string
- Funktion: Aktualisiert das innerHTML des Elements, wodurch rohes HTML gerendert wird.
Anwendungsfälle
1. Rendern von Rich-Text-Inhalten
Wenn HTML-Inhalt vom Server abgerufen und gerendert werden muss:
Beispiel
<template>
<div>
<h2>Artikelinhalt</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Was ist Vue.js</h3>
<p>Vue.js ist ein progressives JavaScript-Framework.</p>
`
}
}
}
</script>
<div>
<h2>Artikelinhalt</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Was ist Vue.js</h3>
<p>Vue.js ist ein progressives JavaScript-Framework.</p>
`
}
}
}
</script>
Sicherheitswarnung
Sicherheitsprobleme: Das dynamische Rendern von beliebigem HTML kann XSS-Angriffe (Cross-Site Scripting) verursachen. Stelle immer sicher, dass der Inhalt von v-html vertrauenswürdig ist, und verwende v-html niemals für von Benutzern übermittelte Inhalte.
Unterschied zu v-text
| Direktive | Funktion | Beispiel |
|---|---|---|
| v-text | Rendert Inhalt als reinen Text | v-text="'test'" zeigt <b>test</b> |
| v-html | Interpretiert Inhalt als HTML | v-html="'test'" zeigt test (fett) |
Andere Erweiterungen