Conditional Rendering in Vue.js

In Vue.js, conditional rendering allows us to show or hide elements based on a condition that will occur in our JavaScript code.

For example, you can make a message appear only if the user is logged in, or a button only show if there are items in the shopping cart.

Vue.js evaluates the condition and automatically decides whether to show or hide the element.

In Vue, we have two ways to do conditional rendering: v-if and v-show. Let’s look at each of them 👇.

The v-if Directive

The most common way to conditionally show or hide an element is the v-if directive, which allows us to render an element based on a boolean expression.

• If the expression is true, the element will be rendered
• If it is false, the element will not be rendered

For example,

<div v-if="showMessage">
  <p>This message will be shown if showMessage is true</p>
</div>

Let’s see it with a complete example

<template>
  <div>
    <p v-if="showMessage">Hello, LuisLlamas.es!</p>
    <button @click="toggleMessage">Toggle Message</button>
  </div>
</template>

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

const showMessage = ref(true);

function toggleMessage() {
  showMessage.value = !showMessage.value;
}
</script>

The v-else and v-else-if Directives

Additionally, we can also use the v-else directive to show an alternative element in case the expression is false.

<div v-if="showMessage">
  <p>This message will be shown if showMessage is true</p>
</div>
<div v-else>
  <p>This message will be shown if showMessage is false</p>
</div>

We even have a v-else-if directive if we need to handle multiple conditions. Let’s see it with an example

<template>
  <div>
    <p v-if="score >= 90">Excellent</p>
    <p v-else-if="score >= 70">Good</p>
    <p v-else-if="score >= 50">Pass</p>
    <p v-else">Failed</p>
  </div>
</template>

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

const score = ref(85);
</script>

Conditional Rendering with v-show

The v-show directive is similar to v-if, but instead of removing the element from the DOM, it simply changes its CSS display property to none to hide it visually.

This means that the element still exists in the DOM, but is not displayed on screen. Otherwise, its use is basically identical.

<div v-show="showMessage">
  <p>This message will be shown if showMessage is true</p>
</div>

Comparison between v-if and v-show

At first glance, v-show and v-if may seem very similar, but they have different uses. The difference lies in how they manage element visibility.

• v-show is more efficient when you need to toggle an element’s visibility frequently, as it only changes its CSS display property (without needing to add or remove the element from the DOM)

• v-if, on the other hand, is more suitable when the element needs to be shown or hidden only under certain conditions.