Vue.js 3.x – 04 – Binding com classes CSS

ATENÇÃO! Para acessar o post anterior a este, em que abordo o conceito de binding (ou vinculação), clique aqui!

No post anterior abordei o conceito de binding, mais precisamente o two-way binding do Vue. Agora vamos falar sobre o binding com classes CSS, que fornece um poder absurdo ao desenvolvedor para manipular o CSS da aplicação.

Para exemplificar, vamos abrir o arquivo App.vue e criar três classes CSS no bloco style: .ok, .error e .strong.

.ok{
  color: blue;
}
.error {
  color: red;
}
.strong{
  text-decoration: underline;
  font-weight: bold;
}

Depois, no bloco script, vamos adicionar ao retorno da função data() duas data properties (hasError e myStyle) que serão usadas para auxiliar a aplicação dos estilos no bloco template. Veja o código a seguir:

data() {
    return {
      //.. ...
      //..demais data properties aqui!
      //..data properties para usar classes CSS.
      hasError : true,
      myStyle : 'strong',
    }
  }

Feito isso, vamos aos testes! Para cada exemplo a seguir, abra o navegador.

No bloco template, é possível vincular um elemento HTML usando a diretiva v-bind da seguinte maneira:

<p v-bind:class="myStyle">Texto Azul!</p>

Podemos também aplicar uma classe estática e fazer o bind com outra. Veja o código destacado:

<p class="ok" v-bind:class="myStyle">Duas Classes!</p>

É possível fazer um binding condicional usando expressões Javascript. Isso é muito útil em casos em que é necessário aplicar classes específicas para erros e validações. Veja:

<p v-bind:class="hasError && 'error'">Se a propriedade hasError é true, então aplique a classe error!</p>

Ou assim:

<p v-bind:class="hasError ? 'error' : 'ok' ">Se a propriedade hasError é true, aplique a classe error, senão, aplique a classe ok.</p>

Também podemos aplicar diversas classes usando arrays:

<p v-bind:class="['ok', 'strong']">Duas Classes!</p>

Binding com estilos inline

Para aplicar classes inline com valores estáticos, usamos a notação JSON:

<h2 v-bind:style="{color: 'orange'}">Estilo inline!</h2>

Para aplicar classes inline segundo data properties declaradas como retorno da função data():

<p v-bind:style="{
     color: highlightColor, //..highlightColor deve ser uma propriedade da função data
     'font-size' : pSize + 'rem' //..pSize deve ser uma propriedade da função data
   }">Estilo inline usando um objeto!</p> 

Também é possíve criar objetos de estilo segundo a notação JSON, aumentando o poder de aplicação de regras CSS aos elementos do bloco template. Para isso precisamos definir um objeto como retorno da função data(), contendo as declarações CSS. Veja o objeto declarado como retorno da função data().

data() {
    return {
      //..outras declarações aqui
      //..declaração de um objeto de estilo
      myStyleObject : {
        //..as propriedades CSS devem ser informadas na notação camel-case.
        color: 'navy',
        textAlign : 'center',
        backgroundColor : 'aqua',
      },
    }
  }

Para usar o objeto de estilo do código anterior, podemos fazer assim:

<h1 v-bind:style="myStyleObject">Objeto de Estilo</h1>

Também é possível aplicar dois objetos de estilo, usando a notação de arrays. Veja:

<h1 v-bind:style="[myStyleObject, anotherStyleObject]">Objeto de Estilo</h1>

Para saber mais sobre o binding com classes CSS, visite a documentação oficial clicando aqui.

Shorthands para diretivas

Algumas diretivas em Vue possuem shorthands, ou seja, uma notação abreviada para simplificar o código. Veja:

No lugar de v-bind:class, use :class

No lugar de v-bind:style, use :style

No lugar de v-bind:href, use :href

Um exemplo de código usando shorthands seria assim:

<p :class="{
    'error' : hasError,
    'strong' : !hasError,
 }">Binding com shorthands</p>

<h2 :style="{
    color : 'orange'
   }"> Estilo inline </h2>

Considerações finais

Compreender como funciona o binding com classes CSS é extremamente importante, pois esse conceito dá um grande poder de estilização ao desenvolvedor front-end. De fato, o Vue está preparado para diversos cenários, como por exemplo:

• Aplicar uma ou mais classes CSS mediante a avaliação de uma expressão lógica usando suas data propeties;
• Adicionar ou remover classes de um ou mais elementos de acordo com eventos ou condições.

Para saber mais sobre o binding com classes CSS, visite a documentação oficial clicando aqui.

No próximo post, falaremos sobre renderização condicional. Até breve!