Menu
I want to be able to hide a div with Vue, with as little impact on performance as possible, since it's a couple of divs on the website that will be treated this way. How do I do this?
Hide div > Display it when clicking on another div: (Example (without Vue))
With Vue (not working)
html
<div id="app" v-on:click="seen = !seen" class="control">
<p>click app</p>
</div>
<div v-if="seen" id="hide">
<p>hide me </p>
</div>
JavaScript
new Vue({
el:'#hide',
data:{
seen: false
}
})
956
We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.
To hide a div using JavaScript, get reference to the div element, and assign value of "none" to the element. style. display property.
using v-if else directive Another way is to hide the element by clicking a button. v-if is a vue directive display content conditionally. you can also add the v-else directive for v-if that works as if-else in any programming language.
Make one div v-cloak--inline which we want to show before HTML page rendered. Another Div which will contain the full page with v-cloak--hidden . Must have to add the css's given here.
As @Ferrybig stated, Vue only has control over the element it's bound to and all of those child elements. Your hide element is outside the element bound to Vue (app) so Vue cannot change it.
With a slight change, your code works fine:
new Vue({
el:'#wrapper',
data:{
seen: true
}
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="wrapper">
<div id="app" v-on:click="seen = !seen" class="control">
<p>click app</p>
</div>
<div v-if="seen" id="hide">
<p>hide me </p>
</div>
</div>I recommend either use "v-show" or ":class" for hiding component efficiently. In my own experience that in some wierd situations, the v-show may causes ag-grid compoenent into bad data table however no problem when use the ":class".
The template code could be:
<div v-show="seen" id="hide">
<p>hide me </p>
</div>
Or
<div :class="{ hide: !seen }" id="hide">
<p>hide me </p>
</div>
with CSS
.hide {
visibility: hidden !important;
}
You can use v-if-else or v-show, they work in different ways. v-if, v-else will attach/detach your HTML element to its root element. On the other hand, v-show will work with style="display:none;",
example: v-if, v-else
<body>
<div id = 'app'>
<button @click="show = !show">Click</button>
<p v-if="show">
v-if value of show is: {{show}}
</p>
<p v-else>
v-else value of show is: {{show}}
</p>
</div>
<script>
const app = new Vue({
el:'#app',
data: function(){
return{
show: true
}
}
});
</script>
</body>
example v-show
<body>
<div id = 'app'>
<button @click="show = !show">Click</button>
<p v-show="show">
v-show works with style="display:none;"
</p>
</div>
<script>
const app = new Vue({
el:'#app',
data: function(){
return{
show: true
}
}
});
</script>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
