Interligações de Classe e Estilo

Uma necessidade comum de interligação de dados é manipular as classes dos elementos e seus estilos inline. Uma vez que ambos são atributos, podemos usar v-bind para lidar com eles: apenas precisamos calcular uma String final com nossas expressões. No entanto, mexer com concatenação de String é irritante e propenso à erros. Por esta razão, Vue fornece aprimoramentos especiais quando v-bind é usado com class e style. Além de Strings, as expressões também podem avaliar Objetos ou Arrays.

Interligando Classes HTML

Assista a uma vídeo aula gratuita sobre classes dinâmicas na Vue School

Sintaxe de Objeto

Podemos passar um objeto para :class (abreviação de v-bind:class) para alternar classes dinamicamente:

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

A sintaxe acima significa que a presença da classe active será determinada pela veracidade (opens new window) do valor do dado isActive.

Você pode ter múltiplas classes alternadas tendo mais campos no objeto. Além disso, a diretiva :class também pode coexistir com um atributo de classe "normal". Então, dado o seguinte modelo:

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

E os seguintes dados:

data() {
  return {
    isActive: true,
    hasError: false
  }
}

Irá renderizar:

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

Quando isActive ou hasError mudar, a lista de classes será atualizada correspondentemente. Por exemplo, se hasError é true, a lista de classes será "static active text-danger".

O objeto vinculado não precisa estar diretamente no template:

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

Isso irá renderizar o mesmo resultado. Podemos também interligar à um dado computado que retorne um objeto. Este é um padrão comum e 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'
    }
  }
}

Sintaxe de Array

Podemos passar um Array para :class para aplicar uma lista de classes:

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

Que renderizará:

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

Se você preferir também alternar entre uma classe na lista condicionalmente, use uma expressão ternária:

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

Isso sempre aplicará errorClass, mas activeClass somente será aplicado quando isActive for verdadeiro.

No entanto, isso pode ser um tanto prolixo se você tiver várias classes condicionais. Por isso também é possível usar a sintaxe de objeto dentro da sintaxe de Array:

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

Em Componentes

Esta seção assume conhecimento sobre Componentes Vue. Pode pular esta parte e voltar depois.

Quando você usa o atributo class em um componente personalizado com um único elemento raiz, essas classes serão adicionadas à este elemento. As classes existentes neste elemento não serão substituídas.

Por exemplo, se você declarar este componente:

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Oi!</p>`
})

E então adicionar mais classes quando for utilizá-lo:

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

O HTML renderizado será:

<p class="foo bar baz boo">Oi!</p>

O mesmo vale para a interligação de classe:

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

Quando isActive for verdadeiro, o HTML renderizado será:

<p class="foo bar active">Oi!</p>

Se o seu componente tiver vários elementos raiz, você precisará definir qual componente receberá essa classe utilizando a propriedade $attrs de componentes:

<div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Oi!</p>
    <span>Este é um componente filho</span>
  `
})

Você pode aprender mais sobre herança de atributos de componentes na seção Atributos Não-Prop.

Interligando Estilos Inline

Sintaxe de Objeto

A sintaxe de objeto para :style é bem direta - parece quase como CSS, exceto por ser um objeto JavaScript. Você pode usar tanto camelCase quanto kebab-case (use aspas com kebab-case) para os nomes das propriedades CSS.

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

Frequentemente é uma boa ideia vincular os estilos diretamente em um objeto para que assim o template fique mais limpo:

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

Novamente, a sintaxe de objeto é frequentemente usada em conjunto com dados computados que retornam objetos.

Sintaxe de Array

A sintaxe Array para :style permite que você aplique múltiplos objetos de estilo para o mesmo elemento:

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

Auto-Prefixação

Quando você usa uma propriedade CSS que requer um prefixo de fabricante (opens new window) em :style, Vue adicionará automaticamente os prefixos apropriados. O Vue faz isso verificando no tempo de execução quais propriedades de estilo são compatíveis com o navegador atual. Se o navegador não suportar uma propriedade específica, várias variantes prefixadas serão testadas para tentar encontrar uma que seja compatível.

Valores Múltiplos

Você pode prover um Array com múltiplos valores (prefixados) para um atributo style, por exemplo:

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

Isto irá renderizar apenas o último valor do Array que o navegador suportar. Neste exemplo, irá renderizar display: flex nos navegadores que suportam a versão sem prefixo do Flexbox.