# Vinculaciones de Clases y Estilos
Una común necesidad para la vinculación de data es manipular la list de class de un elemento y sus style en línea. Como ambos son atributos, podemos utilizar v-bind para manipular ellos: solo necesitamos calcular una cadena de caracteres final con nuestras expresiones. Sin embargo, entrometerse con la concatenación de cadena de caracteres es molesto y susceptible a errores. Por esta razón, Vue proporciona mejoramientos especiales cuando v-bind está utilizado juntos con class y style. Además de cadenas de caracteres, las expresiones pueden también evaularse a objetos o matrices.
# Vinculación de Clases de HTML
# Sintaxis de Objeto
Podemos pasar un objeto a :class (abreviado para v-bind:class) para
alternar clases dinámicamente:
<div :class="{ active: isActive }"></div>
El sintaxis arriba significa la existencia de la clase active será determinado por la veracidad (opens new window) de la propiedad de dato isActive.
Puede tener multiple clases alternados por haber más campos en el objeto. Además, la directiva :class puede también coexistir con el atributo plano class. Por eso dado la siguiente plantilla:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
2
3
4
y el dato siguiente:
data() {
return {
isActive: true,
hasError: false
}
}
2
3
4
5
6
se renderizará:
<div class="static active"></div>
Cuando isActive o hasError se cambia, la lista de clases será actualizado en consecuencia. Por ejemplo, si hasError se cambia a true, la lista de clases será convertido en "static active text-danger".
El objeto vinculado no necesita ser en línea:
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
2
3
4
5
6
7
8
Esto va renderizar el mismo resuelto. Podemos también vincular a una propiedad computada que retorna un objeto. Eso es un patrón común y poderoso:
<div :class="classObject"></div>
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
# Sintaxis de Matriz
Podemos pasar una matriz a :class para aplicar una lista de clases:
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
2
3
4
5
6
Lo que renderizará:
<div class="active text-danger"></div>
Si le gusta también alternar una clase en la lista condicionalmente, puede hacerlo con una expresión ternaria:
<div :class="[isActive ? activeClass : '', errorClass]"></div>
Esto aplicará de siempre errorClass, pero activeClass será aplicado solo cuando isActive es truthy (que se evalua a true).
Sin embargo, esto puede ser un poquito verboso si tiene muchas clases condicionales. Es porque es también posible utilizar la sintaxis de objeto dentro de la sintaxis de matriz.
<div :class="[{ active: isActive }, errorClass]"></div>
# Con Componentes
Este sección asume el conocimiento de Componentes de Vue. Siéntase libre de saltarlo y volver más tarde.
Cuando utiliza el atributo class en un componente personalizado con on sólo elemento raíz, estas clases serán añadido al elemento. Las clases existentes en el elemento no serán sobrescrito.
Por ejemplo, si declara este componente::
const app = Vue.createApp({})
app.component('my-component', {
template: `<p class="foo bar">Hi!</p>`
})
2
3
4
5
Luego añade unase clases cuando lo utilice:
<div id="app">
<my-component class="baz boo"></my-component>
</div>
2
3
El HTML renderizado será:
<p class="foo bar baz boo">Hi</p>
Lo mismo funciona con vinculaciones de clases:
<my-component :class="{ active: isActive }"></my-component>
Cuando isActive es truthy, el HTML renderizado será:
<p class="foo bar active">Hi</p>
Si su componente tiene más que uno elemento raíz, necesitaría definir cual componente recibirá esta clase. Puede hacerlo utilizando el propiedad $attrs del componente:
<div id="app">
<my-component class="baz"></my-component>
</div>
2
3
const app = Vue.createApp({})
app.component('my-component', {
template: `
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
`
})
2
3
4
5
6
7
8
Puede aprender más sobre la herencia de atributos de componentes en la sección Non-Prop Atributos.
# Vincular estilos en línea
# Syntaxis de Objeto
El sintaxis de objeto para :style es muy sencillo - se ve casi igual a CSS, excepto que es un objeto JavaScript. Puede utilizar tanto camelCase como kebab-case (utilice comillas con kebab-case) para los nombres de propiedades de CSS:
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
2
3
4
5
6
Es una buena idea vincular a un objecto de estilo directamente para que la plantilla sea más limpia:
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
2
3
4
5
6
7
8
De nuevo, el sintaxis de objeto es utilizado frecuentemente junto con propiedades computadas que retornan objetos.
# Sintaxis de Matriz
La sintaxis de matriz para :style permite que aplique múltiples objetos de estilo al mismo elemento:
<div :style="[baseStyles, overridingStyles]"></div>
# Prefijarse Automáticamente
Cuando utiliza una propiedad de CSS que requiere un prefijo específico del vendor (opens new window) en :style, Vue va automáticamente añadir el prefijo apropiado. Lo hace Vue mediante comprobar en el tiempo de ejecución para ver cuales propiedades de estilo son suportado en el navegador actual. Si el navegador no suporta una propiedad particular, varios variantes prefijados serán comprodados para tratar de encontrar uno que sea soportado.
# Múltiples Valores
Puede proveer un matriz de múltiples valores (prefijados) a una propiedad de estilo, por ejemplo:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Esto solo renderizará el último valor del matriz que soporta el navegador. en este ejemplo, renderizará display: flex para navegadores que soportan el versión de flexbox sin prefijo.