v-if & v-show are part of the in-built directive in vue, a progressive framework for building user interfaces.
Both directive play a very significant role when it comes to rendering data conditionally in vue. Quite a few people may be able to spot out the difference as result of their experience over time with the directives.
But if paraventure , you happen not to understand this concept, this article got you covered.
v-if
With our basic knowledge of JavaScript, the if condition is not strange , with that being said, the v-if is a conditional directive in vue that is used to add or remove content from the DOM. The content will only be rendered if the directive’s expression returns a truthy value.
<p v-if ="true">Hello</>
<p v-if ="false">world</>
Hello
v-show
This is a conditional directive in vue that renders based on the CSS display property.
In other words, it is used to show or hide content in the DOM . what this means is, whenever we want to change content frequently in our application, the v-show is very handy, for e.g a navbar toggle to show and hide menu bearing in mind that our content is still very much part of the DOM
<p v-show="false">Hello</>
<p v-show ="true">world</>
world
To practice more , visit vue documentation
Code sandbox sample demo
Original post was published on my blog
Top comments (0)