En esta cuarta lección del Curso de Vue.js te hablaremos de una nueva directiva v-bind que es usada para atar dinámicamente un atributo HTML a una expresión de Vue, así como a clases y estilos de CSS de los elementos de nuestra aplicación, lo que nos permitirá manipularlos dinámicamente.

Repositorio

Ver el código de esta lección en GitHub

Notas

  • Como no podemos tener más de una expresión en una directiva, en vez de ello, podemos crear un método donde colocar el código que necesitamos.
  • Usa this. siempre que quieras obtener el valor de una propiedad presente en el objeto data.
  • Para hacer que un atributo HTML sea dinámico podemos trabajar con v-bind de esta manera:

    o su equivalente con el uso del carácter especial :
  • Usamos v-bind para trabajar con clases v-bind:class y así cambiar dinámicamente las clases de un elemento, donde v-bind puede evaluar una expresión o un objeto JavaScript. De igual forma, con los estilos en línea (styles) podemos cambiar estilos de un elemento HTML pasando como parámetro a v-bind:style un objeto JavaScript con las propiedades de CSS a cambiar.

Actividad

  • Practica un poco, haciendo que adicionalmente se muestre la pregunta ¿Cuántos años de experiencia tienes con JavaScript?, tal y como se hizo con la pregunta sobre PHP.

Esperamos te haya gustado la lección, para cualquier duda o comentario, tienes la sección de comentarios y por favor, ayúdanos a compartir este tutorial en todas tus redes sociales. Nos vemos en la próxima lección.

Material relacionado

Lección anterior Métodos y manejo de eventos con v-on:click y submit Lección siguiente Introducción a los componente en Vue.js