This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
In this guide, we will look at class binding with the Vue v-bind directive.
Class binding comes in handy when we have the need of manipulating an element’s class list.
We can either pass an object or array to dynamically toggle a class.
Object Syntax
<template>
<div v-bind:class="{ active: isActive == 1 }"></div>
</template>
<script>
export default {
data() {
return {
isActive: 1
};
}
};
</script>
<style scoped>
.active{
background: tomato;
height: 50px;
width: 50px;
}
</style>
The above syntax means that the class active would be present on the said element( a div in this instance ) as long as the expression evaluates to true.
Multiple classes can also be bound as seen here:
<div
class="static"
v-bind:class="{ active: isActive, error: hasError }"
></div>Array Syntax
We can as well pass an array to apply a list of classes.
<div v-bind:class="[active, error]"></div>The post Class Binding in Vue with Vue v-bind appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-02-17T17:26:12+00:00) Class Binding in Vue with Vue v-bind. Retrieved from https://www.scien.cx/2021/02/17/class-binding-in-vue-with-vue-v-bind/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.