Directivas v-text y v-html en Vue.js

Author
By Darío Rivera
Posted on 2020-06-16 in 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 una 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 este HTML. Hasta pronto!.


Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.