Vinculando Estilos no Vue.js
No Vue.js, é possível definir estilos diretamente em elementos HTML por meio do atributo style, utilizando pares de nome-valor das propriedades CSS. Esses valores podem ser definidos diretamente como strings ou dinamicamente através de propriedades do objeto de dados (data) do Vue. Essa abordagem possibilita a manipulação dinâmica dos estilos de um elemento.
Estilos dinâmicos com propriedades computadas
Para facilitar o gerenciamento de diversos estilos, eles podem ser encapsulados em uma propriedade computada. Isso melhora a organização do código e centraliza as definições de estilo, tornando o componente mais claro e fácil de manter.
No exemplo a seguir, os estilos de um elemento são controlados dinamicamente por meio de uma propriedade computada chamada styleObj. Essa propriedade retorna um objeto contendo as definições de estilo, que são atualizadas conforme o usuário insere valores nos campos de entrada.
<!DOCTYPE html>
<html>
<head>
<title>Explorando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-bind:style="styleObj"></div>
<br /><br />
<input type="text" v-model="color" placeholder="Cor de fundo" />
<br /><br />
<input type="number" v-model="width" placeholder="Largura (px)" />
<br /><br />
<input type="number" v-model="height" placeholder="Altura (px)" />
</div>
<script>
Vue.createApp({
data() {
return {
color: "red",
width: 75,
height: 75,
};
},
computed: {
styleObj() {
return {
"background-color": this.color,
height: this.height + "px",
width: this.width + "px",
};
},
},
}).mount("#app");
</script>
</body>
</html>
Neste caso, styleObj encapsula as definições de estilo, como background-color, height e width. Cada valor é atualizado automaticamente conforme o estado do componente é alterado.
ℹ️ Quando uma propriedade CSS possui um nome composto com traços (como
"background-color"), é necessário usar aspas ao defini-la para que seja interpretada corretamente pelo JavaScript.
Aplicação de múltiplos objetos de estilo
O Vue.js também permite combinar múltiplos objetos de estilo ao mesmo tempo. Isso pode ser feito utilizando a sintaxe de array no v-bind:style, tornando o gerenciamento de estilos mais modular e flexível.
O próximo exemplo divide os estilos em duas propriedades computadas: colorStyle, responsável pela cor de fundo, e sizeStyle, que gerencia as dimensões do elemento. Essas propriedades são combinadas em um array para serem aplicadas ao elemento.
<!DOCTYPE html>
<html>
<head>
<title>Explorando Vue.js</title>
<meta charset="utf-8" />
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-bind:style="[colorStyle, sizeStyle]"></div>
<br /><br />
<input type="text" v-model="color" placeholder="Cor de fundo" />
<br /><br />
<input type="number" v-model="width" placeholder="Largura (px)" />
<br /><br />
<input type="number" v-model="height" placeholder="Altura (px)" />
</div>
<script>
Vue.createApp({
data() {
return {
color: "red",
width: 75,
height: 75,
};
},
computed: {
colorStyle() {
return { "background-color": this.color };
},
sizeStyle() {
return {
height: this.height + "px",
width: this.width + "px",
};
},
},
}).mount("#app");
</script>
</body>
</html>Aqui, os estilos são separados em diferentes propriedades computadas, proporcionando uma abordagem mais modular. As propriedades colorStyle e sizeStyle são combinadas no array v-bind:style, permitindo que cada aspecto do estilo seja gerenciado independentemente.
Documentação oficial: