Guía

Enlace Clases y Estilos

Una necesidad común de data binding es manipular la lista de clases de un elemento y sus estilos en línea. Como ambos son atributos, podemos usar v-bind para manejarlos: solo necesitamos crear una cadena de texto con nuestras expresiones. Sin embargo, concatenar cadenas de texto puede llegar a ser incómodo y propenso a errores. Por esta razón, Vue proporciona mejoras cuando se utiliza v-bind conclass y style. Además de las cadenas de texto, las expresiones también pueden evaluar objetos o matrices.

Enlace de clases HTML

Sintaxis de Objeto

Podemos pasar un objeto a v-bind:class para la asignación dinámica de clases:

<div v-bind:class="{ active: isActive }"></div>

La sintaxis de arriba tiene como resultado la clase active según el valor booleano(https://developer.mozilla.org/en-US/docs/Glossary/Truthy) de la propiedad isActive.

Puede hacer multiple asignación de clases al tener más campos en el objeto. Además, la directiva v-bind:class también puede ser utilizada con el atributo class. De modo que con la siguiente plantilla:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

Y el siguiente objeto data:

data: {
  isActive: true,
  hasError: false
}

Se renderizará:

<div class="static active"></div>

Cuando isActive o hasError cambien, la lista de clases se actualizará consecuentemente. Por ejemplo, si hasError se convierte en true, la lista de clases se convertirá en "static active text-danger".

El objeto no tiene por qué estar en la misma línea:

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

Esto renderizará el mismo resultado. También podemos enlazar una propiedad computada que retorna un objeto. Esto es un patrón común y poderoso:

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

Sintaxis de Array

Pasamos un array a v-bind:class para aplicar una lista de clases:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Que renderizará:

<div class="active text-danger"></div>

Si le gustaría activar una clase en la lista de manera condicional, usted puede hacerlo con una expresión ternaria:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

Esto siempre aplicará errorClass, pero solo aplicará activeClass cuando isActive sea verdadero.

Sin embargo, esto puede ser un poco verborrágico si usted tiene multiple clases condicionales. Por eso también es posible utilizar la sintaxis de objeto dentro de la sintaxis de colección:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

Con Componentes

Esta sección asume que usted tiene conocimientos sobre Componentes de Vue. Siéntase libre de saltársela y volver más tarde.

Cuando usa el atributo class en un componente personalizado, estas clases se agregarán al elemento raíz del componente. Las clases existentes en este elemento no serán sobreescritas.

Por ejemplo, si declara este componente:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

Y agrega algunas clases al usarlo:

<my-component class="baz boo"></my-component>

El HTML renderizado será:

<p class="foo bar baz boo">Hi</p>

Lo mismo aplica para el enlace de clases:

<my-component v-bind:class="{ active: isActive }"></my-component>

Cuando isActive es verdadero, el HTML renderizado será:

<p class="foo bar active">Hi</p>

Enlace de estilos en línea

Sintaxis de Objeto

La sintaxis de objeto para v-bind:style es muy sencilla - es similar a CSS, excepto que es un objeto JavaScript. Puede usar tanto camelCase como kebab-case (use comillas con kebab-case) para los nombres de propiedades CSS:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

A menudo es una buena idea enlazar directamente un objeto de estilo para que la plantilla sea más limpia:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Nuevamente, la sintaxis de objeto es a menudo usada en conjunción con propiedades computadas que retornan objetos.

Sintaxis de Array

La sintaxis de array v-bind:style permite aplicar múltiples objetos de estilo al mismo elemento:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Auto-prefijado

Cuando utilice una propiedad CSS que requiera prefijos de proveedores en v-bind:style, como por ejemplo transform, Vue detectará automaticamente y agregará los prefijos correspondientes a los estilos aplicados.

Valores múltiples

2.3.0+

Desde la versión 2.3.0+ usted puede proveer un array de valores múltiples (de prefijos) a una propiedad de estilo, por ejemplo:

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Esto solo renderizará el ultimo valor en el array que el navegador soporte. En este ejemplo, se renderizará display: flex para los navegadores que soportan la versión sin prefijo de flexbox.

← Propiedades Computadas y Observadores Renderización Condicional →
¿Encontró un error o simplemente quiere contribuir con la documentación? Edite esta página en GitHub! Puesto en marcha en Netlify