Clases dinámicas en 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.