Sometimes, we want to hide div on click in Vue.js.
In this article, we’ll look at how to hide div on click in Vue.js.
How to hide div on click in Vue.js?
To hide div on click in Vue.js, we can use the v-if directive.
For instance, we write
<template>
<div id="app">
<button @click="isHidden = true">Hide</button>
<button @click="isHidden = !isHidden">Toggle hide and show</button>
<h1 v-if="!isHidden">Hide me on click event!</h1>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
isHidden: false,
};
},
//...
};
</script>
to add the isHidden reactive property by returning it in the object in the data method.
And then we add 2 buttons.
The first set isHidden to true when we click it.
And then 2nd toggles the value of isHidden between false and true when we click it.
We then add v-if to show the h1 element when isHidden is false.
Conclusion
To hide div on click in Vue.js, we can use the v-if directive.
