Directive v-html de Vue3
Vue3 Directives intégréesv-htmlLa directive est utilisée pour mettre à jour l'innerHTML de l'élément, en rendant le contenu en HTML brut.
Description de base
v-htmlLa directive insère la valeur de son expression liée dans l'élément en tant que HTML. C'est très utile lorsque du contenu de texte enrichi doit être rendu.
- Type attendu: string
- Fonction: Met à jour l'innerHTML de l'élément, ce qui rend le HTML brut.
Cas d'utilisation
1. Rendu du contenu de texte enrichi
Lorsque du contenu HTML est obtenu depuis le serveur et doit être rendu :
Exemple
<template>
<div>
<h2>Contenu de l'article</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Qu'est-ce que Vue.js</h3>
<p>Vue.js est un framework JavaScript progressif.</p>
`
}
}
}
</script>
<div>
<h2>Contenu de l'article</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>Qu'est-ce que Vue.js</h3>
<p>Vue.js est un framework JavaScript progressif.</p>
`
}
}
}
</script>
Avertissement de sécurité
Problèmes de sécurité: le rendu dynamique de HTML arbitraire peut causer des attaques XSS (Cross-Site Scripting). Assurez-vous toujours que le contenu de v-html est fiable, et n'utilisez jamais v-html sur du contenu soumis par l'utilisateur.
Différence avec v-text
| Directive | Fonction | Exemple |
|---|---|---|
| v-text | Affiche le contenu en texte brut | v-text="'test'" affiche <b>test</b> |
| v-html | Interprète le contenu comme du HTML | v-html="'test'" affiche test (gras) |
Autres extensions