Conditional Rendering in Vue

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>

<template>
    <h1 v-if="msg === 5">Hello World!</h1>
</template>

If we made msgreactive, 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>

<template>
    <h1 v-if="msg.setting === true">Hello World!</h1>
  <button @click="updateMessage">
    Update Message
  </button>
</template>

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>

<template>
    <h1 v-show="msg === 5">Hello World!</h1>
</template>

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.

Also Published Here