Atualizado: 05/01/2025

Vinculando Classes - Vue.js

A vinculação dinâmica do atributo class no Vue.js permite controlar os estilos visuais dos elementos de forma reativa. O exemplo a seguir demonstra como essa funcionalidade pode ser aplicada em uma página HTML:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
<style>
.square {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #999;
    cursor: pointer;
}
.active {
    background-color: red;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <div class="square" v-bind:class="{ active: isActive }" v-on:click="isActive = !isActive"></div>
    <div>isActive = {{ isActive }}</div>
</div>
<script>
Vue.createApp({
    data() {
        return { isActive: false };
    }
}).mount('#app');
</script>
</body>
</html>

Nesse exemplo, um elemento div com a classe square é definido. A vinculação condicional de classes é usada para adicionar ou remover dinamicamente a classe active com base no valor do atributo isActive no estado do componente Vue. A alteração do estado ocorre quando o usuário clica no elemento, alternando o valor de isActive.

Exemplo de vinculação de classes em Vue.js

Vinculação de Várias Classes

Além de vincular uma única classe, é possível vincular várias classes a um elemento com base em condições diferentes. O exemplo a seguir demonstra como isso pode ser feito:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
<style>
.square {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 4px solid transparent;
    background-color: #999;
}
.active {
    background-color: red;
}
.bordered {
    border: 4px solid green;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <div class="square" v-bind:class="{ active: isActive, bordered: isBordered }"></div>
    <button @click="isActive = !isActive">Mudar cor</button>
    <button @click="isBordered = !isBordered">Mudar borda</button>
</div>
<script>
Vue.createApp({
    data() {
        return { isActive: false, isBordered: false };
    }
}).mount('#app');
</script>
</body>
</html>
Exemplo de vinculação de várias classes em Vue.js

Nesse exemplo, duas classes (active e bordered) são vinculadas ao mesmo elemento. O controle de cada classe depende de seus respectivos atributos (isActive e isBordered).

Se nomes de classes contiverem caracteres especiais ou não alfanuméricos, eles devem ser colocados entre aspas:

v-bind:class="{ 'active-color': isActive }"

Vinculando Classes com um Objeto Computado

Para gerenciar múltiplas classes de forma mais organizada, é possível retornar um objeto com as classes a serem aplicadas em um método computado:

<div id="app">
    <!-- Vincula um objeto com as classes a serem aplicadas -->
    <div class="square" v-bind:class="classObj"></div> 
    <button @click="isActive = !isActive">Mudar cor</button>
    <button @click="isBordered = !isBordered">Mudar borda</button>
</div>
<script>
Vue.createApp({
    data() {
        return { isActive: false, isBordered: false };
    },
    computed: {
        // Retorna um objeto com as classes a serem aplicadas
        classObj() {
            return {
                active: this.isActive, bordered: this.isBordered
            }
        }
    }
}).mount('#app');
</script>

Nesse exemplo, um método computado chamado classObj é utilizado para retornar um objeto com as classes a serem aplicadas. Esse objeto é então vinculado ao atributo class do elemento div.

Vinculando Classe a uma Propriedade

Além disso, o atributo class pode ser vinculado a uma propriedade que retorna nome de uma ou mais classes, por exemplo:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
<style>
.square {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #999;
}
.yellow { 
    background-color: yellow; 
}
.red { 
    background-color: red; 
}
.blue { 
    background-color: blue; 
}
.green { 
    background-color: green; 
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <div class="square" v-bind:class="color"></div>
    <input type="text" v-model="color" />
</div>
<script>
Vue.createApp({
    data() {
        return {color: ''}
    }
}).mount('#app');
</script>
</body>
</html>

Nesse exemplo, a propriedade color é vinculada ao atributo class do elemento div. O valor dessa propriedade é alterado dinamicamente por meio de um campo de texto, permitindo que o usuário escolha a cor de fundo do elemento.

Exemplo de vinculação de classe a uma propriedade em Vue.js

Vinculando aos Vetores

Além de vincular a uma propriedade, é possível vincular a um vetor de classes que será aplicado ao elemento. O exemplo a seguir demonstra como isso pode ser feito:

<!DOCTYPE html>
<html>
<head>
<title>Aprendendo Vue.js</title>
<meta charset="utf-8" />
<style>
.square {
    width: 75px;
    height: 75px;
    margin: 10px;
    background-color: #999;
}
.yellow { 
    background-color: yellow; 
}
.red { 
    background-color: red; 
}
.blue { 
    background-color: blue; 
}
.green { 
    background-color: green; 
}
.big {
    width: 100px;
    height: 100px;
}
.bordered {
    border: 2px solid black;
}
.small {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>
<div id="app">
    <div class="square" v-bind:class="[color, {bounded: isBordered}, size]" v-on:click="isBordered=!isBordered"></div>
    <br>
    <input type="text" v-model="color" />
    <br>
    <input type="text" v-model="size" />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
    data() {
        return {
                color: "red",
                size: "small",
                isBordered: false
            }
        }
}).mount('#app');
</script>
</body>
</html>
Exemplo de vinculação de classes aos vetores em Vue.js

Nesse exemplo, um vetor de classes é vinculado ao atributo class do elemento div. O vetor contém a cor, a borda e o tamanho do elemento, que são controlados dinamicamente por meio de campos de texto.

Política de Privacidade

Copyright © www.programicio.com Todos os direitos reservados

É proibida a reprodução do conteúdo desta página sem autorização prévia do autor.

Contato: programicio@gmail.com