Clases, estilos y otros atributos dinámicos usando la directiva v-bind de Vue.js

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:
```
 v-bind:atributo-a-atar="expresión-de-javascript"
```
o su equivalente con el uso del carácter especial :
```
:atributo-a-atar="expresión-de-javascript"
```
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.