9. Interligações de classe e estilo (Introdução ao Vue.js)

Nesse tópico vamos aprender como estilizar dinamicamente nosso HTML, realizando a interligações com o atributo style dos elementos e também sua classe.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Interligações de classe e estilo

Vamos aprender como estilizar dinamicamente nosso HTML, realizando a interligações com o atributo style dos elementos e também sua classe.

Objetivo

Adicionar o background do span com a devida cor do array.

Interligação de estilo

Interligação de estilo (Sintaxe de Objeto/Array)

Interligação de Classe

Interligação de Classe (Sintaxe de Objeto)

Interligação de Classe (Sintaxe de Array)

Problema

Nós precisamos de alguma maneira mostrar o background da cor de acordo com o nome da mesma.

Solução

Vamos usar a interligação de estilo inline para dinamicamente setar o background de nosso span, baseado no nosso array de cores. Vamos passar a cor para a propriedade do css color.

Vamos também adicionar o estilo #span-color em nosso arquivo style.css

• Depois disso vamos adicionar o id="span-color"

• Remover o {{ color }} de dentro de nosso span#span-color

• Adicionar o :style="{ background: color }"

Resultado

9. Interligações de classe e estilo — (O que aprendemos)

• Os elementos HTML podem ser interligados com sua classe ou com seu atributo style de forma dinâmica;
• Nós podemos usar expressões dentro da interligação de classes para avaliar se devemos mostrar uma classe.

7º DESAFIO

• Adicionar uma propriedade color no objeto text com o valor: 'white';
• Adicionar uma propriedade computada chamada textColor, com o corpo do método: return { color: this.text.color };
• Realizar uma interligação de estilo, com as tags <p> e o dado computado textColor = <p :style="textColor">
• Adicionar um método chamado updateTextColor(color), que quando o <span id="span-color"> for clicado, enviar para esse método a cor, e atualizar a cor do texto: this.text.color = color;

Próximo post

10. Componentes (Introdução ao Vue.js)

Referências

Class and Style Bindings - Vue.js