Vue.js | v-if directive

The v-if directive is a Vue.js directive used to toggle the display CSS property of a element with a condition. If the condition is true it will make it visible else it will make it invisible. First, we will create a div element with id as app and let's apply the v-if directive to this element with data. Now we will create this data by initializing a Vue instance with the data attribute containing the value.

Syntax:

v-if="data"

Parameters: This directive accepts a single parameter which is the data or a condition. 
Example 1: This example uses VueJS to show an element with v-if.

Output:

Example 2: This example uses VueJS to show an element with v-if arithmetic conditions.

Output: