Clases y estilos reactivos con Vuejs

En este segundo tutorial de la serie Vuejs desde el CDN aprenderemos a utilizar el binding para obtener clases y estilos reactivos con Vue. Verás que gracias al binding es muy fácil cambiar los estilos en tiempo de ejecución para lograr la reactividad que deseamos en nuestro proyecto web.

Los bindings ya lo vimos en el primer tutorial de esta serie, en aquí profundizaremos en algunas particularidades que tienen estos para modificar las clases y estilos de nuestra web. Por ejemplo utilizaremos :class para modificar las clases y :style para modificar los estilos CSS trayendo valores desde la instancia de Vue para lograr de esta forma la reactividad en los estilos de nuestros proyectos.

1. El binding `:class`

Usando :class podemos definir clases al igual que lo haríamos en el atributo class pero aquí tenemos que usar comillas simples dentro de las comillas dobles, solo si se trata de un data se obvian las comillas simples. Por ejemplo si queremos darle a un botón la clase bg-danger tendríamos que hacer lo siguiente.

<button :class="'bg-danger'">Click me</button>

Y si lo que queremos es aplicar varias clases a una etiqueta HTML debemos hacerlo en forma de arreglo, de la siguiente forma.

<button :class="['bg-warning', 'btn']">Click me</button>

Además podemos definir clases condicionales de tal forma que la clase sea aplicada cuando una determinada condición se cumpla. Además, para usar clases condicionales debemos hacer uso de { }. En el siguiente ejemplo la clase bg-warning se aplicará solo cuando value_bool es verdad.

<button :class="{'bg-warning' : value_bool}">Click me</button>
<!--Incluso podemos definir la propia lógica dentro del binding.-->
<button :class="{'bg-warning' : num < 10}">Click me</button>

Incluso podemos definir estructuras condicionales complejas usando varias variables y condiciones de la siguiente manera.

<button
  :class="{'bg-danger': progress <= 40, 'bg-warning': progress > 40 && progress < 80, 'bg-success': progress >= 80}"
>
  Click me
</button>

Y si lo que queremos es unir clases condicionales con las clases estáticas lo hacemos de la siguiente manera.

<button :class="['progress-bar', {'bg-danger': progress <= 40}]">
  Click me
</button>

Por ultimo, pero no menos importante, podemos definir la clase condicional dentro de un método computed de la siguiente manera.

color: function(){
    return {
        'bg-danger': this.progress <= 40,
        'bg-warning': this.progress > 40 && this.progress < 80,
        'bg-success': this.progress >= 80
    }
},

<button :class="color">Click me</button>

2. El binding `:style`

Usando :style podemos cambiar el estilo de algún elemento HTML en tiempo de ejecución. Para esto usamos el nombre de la propiedad CSS seguido del valor que queremos que tome entre comillas simples y todo dentro de {}, como en el siguiente ejemplo donde num viene desde un data de la instancia de Vue.

<button :style="{fontSize : num + 'px'}">Click me</button>
<button :style="{fontSize : '5px'}">Click me</button>

Si lo que queremos es usar varias propiedades CSS lo hacemos de la siguiente manera.

<button :style="{color : value, background-color : 'white'}">Click me</button>

Vue también nos permite usar los atributos class y style junto con los binding :class y :style como en el siguiente ejemplo.

<div class="bg-danger" :class="'p-3'">
  <p>
    Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De
    carne lumbering animata corpora quaeritis. Summus brains sit.
  </p>
</div>

3. Tu turno

Usando estos conceptos que acabamos de conocer de VueJs te animo a realizar el siguiente proyecto. Esta es una aplicación con un prograssBar que cambia de color dependiendo del valor que tengan. Para realizar esta aplicación es necesario hacer uso de Bootstrap.

Cuando quieras puedes ver el código del proyecto terminado. Pero ándale inténtalo tu mismo!!

4. El código

El código del proyecto está en el siguiente repositorio. github.com/andygeek/SimpleProgressBar_Vuejs