Directiva v-html de Vue3
Directivas integradas de Vue3v-htmlLa directiva se utiliza para actualizar el innerHTML del elemento, renderizando el contenido como HTML sin procesar.
Descripción básica
v-htmlLa directiva inserta el valor de su expresión vinculada como HTML en el elemento. Esto es muy útil cuando se necesita renderizar contenido de texto enriquecido.
- Tipo esperado: string
- Función: Actualiza el innerHTML del elemento y renderiza HTML sin procesar.
Casos de uso
1. Renderizar contenido de texto enriquecido
Cuando se obtiene contenido HTML del servidor y es necesario renderizarlo:
Ejemplo
<template>
<div>
<h2>Contenido del artículo</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>¿Qué es Vue.js?</h3>
<p>Vue.js es un framework de JavaScript progresivo.</p>
`
}
}
}
</script>
<div>
<h2>Contenido del artículo</h2>
<article v-html="articleContent"></article>
</div>
</template>
<script>
export default {
data() {
return {
articleContent: `
<h3>¿Qué es Vue.js?</h3>
<p>Vue.js es un framework de JavaScript progresivo.</p>
`
}
}
}
</script>
Advertencia de seguridad
Problema de seguridad: La renderización dinámica de HTML arbitrario puede provocar ataques XSS (Cross-Site Scripting). Asegúrate de que el contenido de v-html sea confiable y nunca uses v-html en contenido enviado por el usuario.
Diferencia con v-text
| Directiva | Función | Ejemplo |
|---|---|---|
| v-text | Renderiza el contenido como texto plano | v-text="'test'" muestra <b>test</b> |
| v-html | Interpreta el contenido como HTML | v-html="'test'" muestra test (negrita) |
Otras extensiones