Clases dinámicas en Vue.js

Author
By Darío Rivera
Posted on 2020-09-26 in Vue.js

En Vue.js existe una manera muy sencilla de agregar clases dinámicamente a un elemento HTML. La forma de hacerlo está ligada a cómo funciona la directiva v-bind en Vue de la cuál hemos hablando anteriormente en el post Enlace de atributos en Vue.js.

Para este ejemplo vamos a utilizar el siguiente código CSS.

.red {
  color: red;
}
.green {
  color: green;
}
.price {
  letter-spacing: 4px;
}

Y vamos a definir el elemento sales con los siguientes valores de facturación por día.

var vue = new Vue({
  el: "#app",
  data: {
    sales: {
      '2020-01-01': 100,
      '2020-01-02': 200,
      '2020-01-03': 300
    }
  }
});

Supogamos que queremos mostrar en rojo la facturación menor o igual a 100 USD y en verde la facturación por encima de 100 USD. Para esto, podemos utilizar el shortcut la directiva v-bind para colocar un objeto en el atributo array y decidir si se aplica cada clase:

<ul id="app">
  <li class="price"
      :class="{ red: price <= 100, green: price > 100 }"
      v-for="(price, date) in sales">
    {{ '\{\{ date \}\}' }} ____ $ {{ '\{\{ price \}\}' }}
  </li>
</ul>

Observa también que hemos colocado a propósito la clase price en el elemento li. Con esto, queremos mostrar que la directiva v-bind adjunta la clase seleccionada a las que ya existen. Veamos el ejemplo anterior en funcionamiento con codepen.



Sintaxis de array

Si bien es posible pasar un objeto en el atributo class, también es posible pasar un array de clases a agregar. Veamos un ejemplo simple en donde adjuntamos un par de clases a un botón.

<button :class="['btn', 'btn-success']">Submit</button>

Esto es exactamente igual a hacer lo siguiente:

<button class="btn btn-primary">Submit</button>

A simple vista parece no tener mucha utilidad, el verdadero poder de esta sintaxis consiste en que puedes combinarlo con la sintaxis de objeto. Entonces puede ser útil que debas verificar si realmente necesitas la clase btn-success en un botón o necesitas btn-danger. Dicho esto, podríamos tener algo como lo siguiente:

<button
   :class="['btn', isError ? 'btn-danger' : 'btn-success']"
   @click="isError = !isError">Submit</button>

Al dar clic en el botón cada vez cambiará de clase según el valor de isError. Puedes ver este ejemplo corriendo en codepen.



Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.