VueJS part 3: Vue directives and conditional rendering

Kristijan
3 min readSep 17, 2023

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.

Vue logo

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

--

--