Vinculando Estilos - 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.