Vinculando Classes - Vue.js
A vinculação dinâmica do atributo class
<!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
square
active
isActive
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
bordered
isActive
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
class
div
Vinculando Classe a uma Propriedade
Além disso, o atributo class
<!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
class
div
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
div