En la lección de hoy examinaremos a fondo la directiva v-bind en combinación con los atributos class y style, los cuales nos van a permitir aprender a agregar y quitar clases y estilos de CSS de forma dinámica y reactiva utilizando por supuesto Vue.js.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

En Vue.js 2 NO podemos colocar clases en nuestros elementos HTML usando interpolaciones.

Especificando un objeto dentro de la directiva v-bind:class podemos agregar estilos de forma dinámica a nuestros elementos.

Vue nos permite combinar un atributo class dinámico (con el uso de v-bind:class o :class) y un atributo class estático. En nuestro ejemplo anterior, la clase form-group es estática (siempre estará presente), por lo tanto podemos simplificar nuestro código de la siguiente manera:

:class es la versión corta de v-bind:class

El valor de la directiva :class es una expresión de JavaScript, por lo que podemos usar dentro de esta los datos que tenemos en nuestra instancia de Vue así como también nuestras computed properties:

Vue también nos permite hacer uso de la directiva :style para definir estilos de CSS directamente en nuestros elementos HTML. Dentro de esta directiva, al igual que con la directiva :class, podemos usar computed properties, métodos o propiedades dentro del objeto data:

Las computed properties nos sirven para organizar mejor nuestro código.

Dentro de la directiva :style también podemos hacer uso de un array que contengan objetos y Vue se encargará de combinarlos por nosotros, dándole preferencia a los objetos en las últimas posiciones del arreglo.

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Mostrar y ocultar elementos usando v-if y v-show con Vue.js 2 Lección siguiente Listado de elementos con v-for en Vue 2