Sometimes it is required to control the flow of the CSS classes and style properties of the element based on the expression at runtime.
In Vue.js there is a v-bind directive to update the HTML attribute.
In this tutorial, I am using this on class v-bind:class and style v-bind:style.
The v-bind:class adds and removes classes from the elements without affecting the value of the class attribute.
In the demonstration, I am using the v-bind directive to dynamically toggle CSS class and style property from the element on a click.
Contents
1. Download and Include
- Download Vue.js library from here or you can use CDN. Include the
<script >in<head>section.
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
2. HTML
Create two <div> in the <div id='myapp'>.
On the <div class='div'> add v-bind:class and define @click event which calls toggleClass() method.
In the second <div> I use @click='isActive = !isActive'.
In the v-bind:class I am using Array syntax to toggle class according to the isActive value using trinary operator.
The value of isActive is managed from the <script >.
Completed Code
<div id='myapp'> <!-- div 1 --> <div class='div' v-bind:class="[isActive ? 'red' : 'blue']" @click="toggleClass()"></div> <!-- div 2 --> <div class='div' v-bind:class="[isActive ? 'blue' : 'red']" @click="isActive = !isActive"></div> </div>
3. CSS
Here, is the CSS classes that I used above.
.red{
background: red;
}
.blue{
background: blue;
}
.div{
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid black;
}
4. Script
Create an instance of Vue where define a single variable isActive: true in data option.
Define a method toggleClass().
This method call from the <div class='div'> on click.
From this method update isActive value. If it is true then assign false otherwise true.
Completed Code
var app = new Vue({
el: '#myapp',
data: {
isActive: true
},
methods: {
toggleClass: function(event){
this.isActive = !this.isActive;
}
}
})
5. Demo
6. v-bind:style
You can use v-bind:style to toggle only CSS property in the style attribute instead of a class.
Syntax –
v-bind:style='{property-name: expression,...}'
In the example, create two <div > where define v-bind:style to set background-color property according to isActive value.
The script is same as the above example only change the el: "#app2".
Completed Code
<div id='app2'>
<!-- div 1 -->
<div class='div' v-bind:style='{"background-color" : (isActive? "orange" : "yellow" )}' @click="toggleClass()"></div>
<!-- div 2 -->
<div class='div' v-bind:style='{"background-color": (isActive? "yellow" : "orange" )}' @click="isActive = !isActive"></div>;
</div>
<!-- Script -->
<script>
var app = new Vue({
el: '#app2',
data: {
isActive: true
},
methods: {
toggleClass: function(){
this.isActive = !this.isActive;
}
}
})
</script>
7. Conclusion
Use trinary operator in the v-bind:class to toggle CSS class on the element.
If you only want to toggle values of some CSS properties according to expression then you can use v-bind:style.
