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.
Notas
En Vue.js 2 NO podemos colocar clases en nuestros elementos HTML usando interpolaciones.
<!-- Esto no funciona -->
<div v-if="vue.years < 2" class="form-group {{ descriptionError != '' ? 'has-error' : ''}}">
...
</div>
Especificando un objeto dentro de la directiva v-bind:class podemos agregar estilos de forma dinámica a nuestros elementos.
<!-- La clase has-error se agrega de forma dinamica dependiendo del valor de descriptionError -->
<div v-if="vue.years < 2" :class="{ 'form-group': true, 'has-error': descriptionError != null }">
...
</div>
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:
<div v-if="vue.years < 2" class="form-group" :class="{ 'has-error': descriptionError }">
....
</div>
: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:
computed: {
...
descriptionFieldClasses: function () {
return [
'form-group',
{ 'has-error': this.descriptionError }
];
}
}
<!-- Podemos usar una computed property dentro de la directiva :class -->
<div v-if="vue.years < 2" class="form-group" :class="{ descriptionFieldClasses }">
...
</div>
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:
computed: {
...
descriptionStyles: function () {
if (this.descriptionError) {
return { color: '#a94442' };
}
...
}
}
<!-- Usamos nuestra computed property dentro de la directiva :style -->
<div v-if="vue.years < 2" class="form-group" :style="descriptionStyles">
...
</div>
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.
<div v-if="vue.years < 2" class="form-group" :style="[{color: '#44a942'}, descriptionStyles]">
...
</div>
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
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