v-html Renderizar HTML Bruto
Última atualização: 2026-10-22
v-html Renderizar HTML Bruto
O v-html interpreta a string como HTML e injeta dentro do elemento; serve para renderizar rich text.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<div v-html="htmlContent"></div>⚙️ Argumentos
| expression | Uma string HTML (sem escape automático) |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The page shows bold and italic text — the HTML string is parsed and rendered.💡 Pontos-chave
⚠️ Aviso Use v-html só com conteúdo confiável: como não escapa, entrada de usuário renderizada diretamente permite XSS.
⚠️ Aviso Nunca use v-bind e outras diretivas dentro do conteúdo do v-html: o template inserido não é compilado e as diretivas não funcionam.
💡 Dica Para texto simples, use v-text ou {{ }}; reserve o v-html para quando realmente precisar de estrutura HTML.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O v-html tem risco de segurança?
R Sim. Ele não escapa o conteúdo; dados controlados pelo usuário renderizados por ele causam XSS. Use apenas com HTML confiável ou sanitizado.
P Por que diretivas dentro do v-html não funcionam?
R O HTML inserido não passa pelo compilador de templates, então diretivas como v-bind são ignoradas. Para templates dinâmicos, use funções de render ou componentes.
P Como renderizar rich text com segurança?
R Sanitize o HTML (por exemplo, com DOMPurify) antes de entregá-lo ao v-html; quando não precisar de formatação, prefira v-text.
