What are the conditional directives?

VueJS provides set of directives to show or hide elements based on conditions. The available directives are: **v-if,
v-else, v-else-if and v-show**

1. v-if: The v-if directive adds or removes DOM elements based on the given expression. For example, the below
button will not show if isLoggedIn is set to false.

<button v-if="isLoggedIn">Logout</button>

You can also control multiple elements with a single v-if statement by wrapping all the elements in a <template>
element with the condition. For example, you can have both label and button together conditionally applied,

<template v-if="isLoggedIn">
  <label> Logout </button>
  <button> Logout </button>
</template>

2. v-else: This directive is used to display content only when the expression adjacent v-if resolves to false.
This is similar to else block in any programming language to display alternative content and it is preceded by v-if
or v-else-if block. You don't need to pass any value to this.
For example, v-else is used to display LogIn button if isLoggedIn is set to false(not logged in).

<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </button>

3. v-else-if: This directive is used when we need more than two options to be checked.
For example, we want to display some text instead of LogIn button when ifLoginDisabled property is set to true. This
can be achieved through v-else statement.

<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> User login disabled </label>
<button v-else> Log In </button>

4. v-show: This directive is similar to v-if but it renders all elements to the DOM and then uses the CSS
display property to show/hide elements. This directive is recommended if the elements are switched on and off
frequently.

<span v-show="user.name">Welcome user,{{user.name}}</span>

****