VueJS part 3: Vue directives and conditional rendering

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering what are directives and how to use them to conditionally display content.

Directives and what it is

In the previous post, I used special HTML attributes for displaying values. These are no HTML native attributes, but Vue directives. That means that when you add these to your, Vue will automatically provide some functionality to those elements. I already used the v-bind directive, which is used to bind values from application data to other HTML attributes like the href attribute.

There are many more directives, like ones for looping the lists, handling events, and conditional rendering that will be covered in the rest of this post, and more.

Conditional rendering

When building applications, conditional rendering is quite common. You might want to hide some content if the user is not logged in or show some badges on the user profile. For that, in Vue, there are two directives, v-if and v-show.

Directive v-if

This directive is quite straightforward. You add the v-if attribute that evaluates to true or false, and then that element and content inside of it is either shown or not. However, quite often you want to show alternative content, for that there are two other directives, the v-else-if, and the v-else.

v-if example

For this example, let's imagine there is a probability variable that contains values zero to one. And based on it, we show the low, medium, or high probability text. Below is the code that we could use for such tasks. Please note that the v-else and the v-else-if are not mandatory to use unless your use case requires them. But if you are using them they need to be used immediately after the v-if and each other.

<div v-if="probability >= 0.8">High probability</div>
<div v-if="probability < 0.8 && probability >= 0.3">Medium probability</div>
<div v-if="probability < 0.3">Low probability</div>

Note on v-if directive

When using this directive, it works on the element it is set on. If you have multiple sibling elements that need to be toggled, you would need to either add v-if to each of those elements or wrap them into another element that will contain this directive. Another alternative is using the template tag for wrapping. The difference between this and using another HTML tag for wrapping is that the template tag won’t be rendered.

<template v-if="probability < 0.5">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
</template>

Directive v-show

Using the v-show is quite similar to the v-if. You add it to the element, and if the expression is true, the element is shown, otherwise, it is not. However, there are a few differences

1. There is no v-else when using this directive
2. Directive v-show does not work with template tags
3. When using v-if, the hidden element is completely removed from the DOM. However, the v-show just hides it using the CSS. That means that in the inspector you could still see elements that are not visible with the CSS rule display set to none.

v-show example

<div v-show="probability < 0.5">
    Hidden text
</div>

When to use v-if and when to use v-show

As stated above, there are some limitations with v-show. Like no support for the template tag and v-else. But the general guideline is how often your element will be toggled. If it is often, v-show might be a better option as it just hides the element with the CSS instead of completely removing it.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.