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.
With our basic knowledge of
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</>
This is a conditional directive in
vue that renders based on the CSS
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
<p v-show="false">Hello</> <p v-show ="true">world</>
To practice more , visit vue documentation
Code sandbox sample demo