Puede que una de las mayores necesidades que tenemos a la hora de desarrollar la parte front de nuestros proyectos, es la manipulación de las clases de estilo sobre elementos del DOM. Gracias a Vue podemos manejar clases simplemente con el uso de cadenas string, objetos y arrays. Conozcamos el class binding en Vue.
Como ya sabremos, en jQuery la manipulación de clases de los elementos también es posible con ciertos métodos.
Pero no debemos olvidar que Vue renderiza nuestra vista en tiempo real gracias a las directivas, y la directiva que corresponde a la manipulación de los elementos ya sabemos que es v-bind.
$("button").attr("title", "Esto es un title generado por JS");
Hasta ahora sabíamos que para manipular algún atributo era necesario el método attr() en jQuery. En el ejemplo anterior se está seleccionando toda etiqueta button y se le está cambiando el atributo «title» con un mensaje que pasamos como segundo argumento.
Ahora observemos el siguiente ejemplo. He añadido un asset de Bootstrap para que las clases sean reconocibles por los usuarios.
See the Pen class binding vue 1 by Jesús Chicano (@jesuschicano) on CodePen.
Dentro del content tenemos 3 botones, todos ellos cuentan ya con una clase «btn» de Bootstrap y aunque tienen más elementos, centrémonos solo ahora en :title.
Lo que estamos realizando es un «v-bind:title», una modificación del atributo tittle como hemos visto en jQuery.
En el data de nuestro objeto Vue se ha declarado una propiedad llamada titleJS que contiene una cadena de texto.
Esta propiedad es la que se llama desde la directiva :title. Con esto ya hemos realizado lo mismo que en el ejemplo jQuery anterior, sin funciones, sin más requisitos. Solamente una directiva… ¡magia!
Class binding
Pasemos ahora a la chicha del artículo. Aquí hemos venido a manipular clases con Vue.
En el ejemplo adjunto vemos que cada botón tiene una directiva :class con llamadas distintas a propiedades del objeto Vue.
Vue está renderizando la propiedad «class» de cada botón pasándole las clases de cada propiedad. Donde «azul» llamará a la clase «btn-primary», la propiedad «verde» contiene la clase «btn-success» y «resto» tiene un array de clases.
El resultado es el mismo que si hubiéramos escrito la etiqueta button tal que así:
<button class="btn btn-primary">Clicame</button>
See the Pen class binding vue 2 by Jesús Chicano (@jesuschicano) on CodePen.
Centrémonos en la parte del botón en primer lugar:
- Un botón con una primera clase «btn» en el HTML.
- Tiene un binding de clase que recibe una condición.
- Y un listener al evento «click» que llama al método «activate».
¿Qué tenemos en nuestro objeto Vue?
- Anidado en data una propiedad llamada estaActivo a false.
- Y má abajo el método activate() que cambia la propiedad anterior a verdadera.
- Tiene un binding de clase que recibe una condición.
- Y un listener al evento «click» que llama al método «activate».
Lo que deducimos de esto es que si nosotros hacemos clic en el botón «clicame» llamará a la función activate() que cambiará la propiedad estaActivo de falso a verdadero.
Y la condición que tenía la etiqueta button era que si estaActivo pasaba a ser verdadera, éste recibiría la clase «btn-success»; lo que lo convertiría a color verde.
Condicionales
La directiva v-bind puede aceptar también condicionantes dentro de la etiqueta. Esto nos permite, como en el ejemplo anterior, la posibilidad de intercambiar una clase por otra.
El texto dentro de la etiqueta «div» tendrá la clase fracaso: «text-danger» (texto en rojo) hasta que la propiedad «estaActivo» pase a ser verdadera.
Cuando esto ocurre, la clase se intercambiará por la la propiedad exito: «text-success» (convirtiendo el texto contenido en verde).
Detalle importante: el binding del botón es ligeramente distinto al de la etiqueta div. Mientras que para acceder a una única propiedad se usan las llaves ( { } ), usaremos corchetes ( [ ] ) para anidar un array de propiedades/clases, así como las condiciones.
Hasta aquí lo que hemos aprendido sobre el uso del manejo de clases o class binding en Vue.js.