Directivas v-text y v-html en Vue.js
En un post anterior vimos el enlace de atributos en Vue.js y construímos nuestra primer aplicación en Vue.js. En estos post dejamos en claro el concepto de bindings y las interpolaciones de texto con las llaves {{ '\{\{ message \}\}' }}. El día de hoy veremos dos directivas muy similares en cuanto a la impresión de texto/html en la página.
Directiva v-text
Esta directiva permite hacer un trabajo similar a la interpolación de texto con la diferencia que la interpolación puede ser usada para renderizar un fragmento del texto de un elemento, la directiva v-text renderizará todo el contenido. Vemos un ejemplo.
Como puedes darte cuenta en el primer párrafo se ha utilizado la interpolación de texto ya que solo se desea enlazar la última parte del texto. En el segundo párrafo se ha utilizado la directiva v-text que enlazará todo el contenido en texto del párrafo.
Directiva v-html
Esta directiva permite imprimer código html en el elemento en cuestión. Es el equivalente al innerHTML de JavaScript. Veamos un ejemplo.
Esta directiva delegará la impresión del HTML al navegador sin realizar algún renderizado a priori, es decir, no se puede utilizar directivas de Vue en el código HTML que se desea imprimir. Hasta pronto!.