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

Conclusion

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

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

📣 Sponsor

v-if vs v-show

Other differences between v-if and v-show

Conclusion

More Tips and Tricks for Vue

Subscribe for Weekly Dev Tips