v-show vs v-if: Conditional Rendering in Vue

📣 Sponsor

v-if and v-show are two ways to conditionally render content in Vue. Both are built to conditionally render content in Vue, but in slightly different ways - which can be quite confusing. Let’s take a look at how they work, and when you would use each.

v-if vs v-show

v-if in conditional rendering is the one you will want to use most of the time. That’s because the way v-if works is to completely eliminate the DOM elements if the condition within it returns false. For example, below we’ll try to render an <h1> tag, but only if msg is equal to 5. In the below example, msg isn’t equal to 5, so the <h1> will never be rendered:

<script setup> const msg = 6 </script> <h1 v-if="msg === 5">Hello World!</h1>

If we made msg reactive, and updated it, we could conditionally render the content based on a button press, like in this code:

<script setup> import { reactive } from 'vue' const msg = reactive({ setting: true }) function updateMessage() { if(msg.setting) msg.setting = false else msg.setting = true } </script> <h1 v-if="msg.setting === true">Hello World!</h1> <button @click="updateMessage"> Update Message </button>

This is fine for most cases. Loading one less DOM element is usually a better idea, and can help with some styling issues you may run into. If you try to look at your code in Inspect Element, you’ll see that the <h1> tag we tried to render won’t exist if v-if is returning false. Pretty cool, right?

However, there are some situations where you’ll want the DOM element to be rendered, though, even if v-if returns false. For example, you may want to apply some Javascript to your DOM element, even if it is supposed to be hidden. For that, you can use v-show:

<script setup> const msg = 6 </script> <h1 v-show="msg === 5">Hello World!</h1>

The difference between v-show and v-if is that v-show does not eliminate the DOM element. If the expression in v-show returns false, the element will still be rendered and exist in the document, but it will have display: none applied to it in CSS.

Other differences between v-if and v-show

There are two other key differences between v-if and v-show:

  • v-if can be used on <template> elements, but v-show cannot.
  • v-if also supports v-else and v-else-if clauses, whereas v-show does not. Learn more about this here


v-if and v-show both have their uses. While v-if will stop something being rendered if the expression within it returns false, v-show will still render the element - but it will apply display: none to the element.

To learn more about Vue, you can check out my other articles here.

Last Updated 1675720828496

More Tips and Tricks for Vue

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email