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…
