Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 20

En este ejercicio veremos cómo añadir código HTML para que sea renderizado dentro de nuestra instancia Vue.

En principio podríamos pensar que es algo muy sencillo, ¿no? Creamos una nueva instancia dentro de un elemento, una propiedad myhtml dentro del bloque data a la que asignamos una cadena con el formato de marcado HTML y la mostramos dentro de un bloque {{ myhtml }} [1].

¿Esto funcionaría? Bueno, la respuesta en este caso sería negativa ya que dentro de la instancia no se renderizaría nuestro código HTML si no como un simple texto. Esto es así para evitar una vulnerabilidad crítica en la web (XSS: cross site scripting) que pudiera permitir una modificación maliciosa del código HTML de la variable.

¿Y no existe ninguna forma de añadir código HTML? Sí que la hay, Vue nos da una directiva específica, que igualmente deberemos utilizar siempre con cuidado, denominada v-html.

En el ejercicio declaramos la variable html con el contenido a renderizar que simplemente es un título y un link a otra página y dentro de un elemento div indicamos mediante la directiva v-html que dentro se renderizará el código HTML. Fácil ¿verdad? [2]