VueJS 3 tutorial – Conditional rendering with v-if and v-show

A shop has to say whether the product is available. Vue gives you two tools for showing or hiding an element based on a condition: v-if and v-show. They look alike, but they do not do the same thing.

Setting up the condition

Add a stock level to the component state:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
</script>

v-if, v-else-if, v-else

v-if puts an element on the page only if the expression is true.

<p v-if="inventory > 10">En stock</p>

To cover several cases, chain them with v-else-if and v-else:

<div class="product-info">
  <h1>{{ product }}</h1>

  <p v-if="inventory > 10">En stock</p>
  <p v-else-if="inventory > 0">Bientôt en rupture</p>
  <p v-else>En rupture</p>
</div>

Only one of those three paragraphs exists at a time. Set inventory to 5, then to 0, and watch the message change.

Applying one condition to several elements

To apply a condition to a group without adding a useless div, put the v-if on <template>. That tag produces nothing in the final HTML.

<template v-if="inventory > 0">
  <h2>Disponible</h2>
  <p>Expédié sous 48 heures.</p>
</template>

v-show

v-show answers the same need, with different mechanics:

<p v-show="inventory > 0">Livraison sous 48 h</p>

The element is always present in the DOM. When the condition is false, Vue simply applies display: none to it. Open the inspector to see for yourself:

<!-- inventory vaut 0, avec v-if : l’élément a disparu -->
<!--v-if-->

<!-- inventory vaut 0, avec v-show : l’élément est là, masqué -->
<p style="display: none;">Livraison sous 48 h</p>

Which one to choose

The difference comes down to the cost of the operation.

• v-if creates and destroys the element, and with it its child components and their state. High cost on every toggle, no cost at all while the condition is false.
• v-show only changes a CSS property. High cost on the first render, since the element is always built, and next to nothing on the toggles that follow.

In practice: v-show for anything that opens and closes often, such as a menu or a collapsible panel. v-if for everything else, especially what is expensive to build or must not exist at all in some cases.

v-if and v-for on the same element

Do not combine them on the same tag. The v-for loop is the subject of the next chapter. Since Vue 3, v-if takes priority and is evaluated before the loop: the loop variable does not exist yet, which throws an error. Put the v-if on an inner <template>, or filter the list in a computed property. We will see both in chapter 7.