paint-brush
Conditional Rendering in Vueby@smpnjn
228 reads

Conditional Rendering in Vue

by Johnny SimpsonFebruary 7th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

V-if and v-show are two ways to conditionally render content in Vue. They work 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` in conditional rendering is the one you will want to use most of the time.
featured image - Conditional Rendering in Vue
Johnny Simpson HackerNoon profile picture

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 falsev-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