Vinculando Classes no 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.
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>
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.
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>
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.
Documentação oficial: