4 - Class and Style Bidings

Question 1

Qual o padrão recomendado quando estamos fazendo binding de múltiplas classes em vue, para evitar poluir o template?

Answer 1

A documentação do vue recomenda o uso de computeds que retornem um objeto de classes dinâmicas.

Question 2

Como o Vue lida com classes que são atribuídas a single file components?

Answer 2

Caso o componente possua um único elemento raiz, as classes definidas na chamada do componente serão merjadas e adicionadas apóis as às classes já existentes nesse elemento. Caso o componente não possua elemento raiz, vai ser necessário definir qual elemento vai receber quyal classe através da propriedade $attrs, como em :class=”$attrs.class1”

Question 3

De quais formas podem ser feitos binds em classes em Vue?

Answer 3

Pode ser feito bind com propriedades, com computadas com objetos e com arrays.

Question 4

Em um binding com objeto, o que representa a chave e o que representa o valor?

Answer 4

A chave é a classe a ser aplicada, enquanto que o valor é a expressão a ser avaliada para aplicação da classe. Ex :class=”{ class: expression }”