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 shows 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 perform conditional rendering: v-if and v-show. Let’s see each of them 👇.

v-if Directive

The most common way to show or hide an element conditionally 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>

v-else and v-else-if Directives

Additionally, we can also use the v-else directive to show an alternative element if 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">Passed</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 hiding the element from the DOM, it simply changes its CSS property display to none to visually hide it.

This means that the element still exists in the DOM, but it is not displayed on the screen. Otherwise, the usage 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 the visibility of elements.

• v-show is more efficient when you need to toggle the visibility of an element 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.