Conditionally Rendering Elements with v-if

Hello, students! Welcome to Lesson 3 of Vue.js Directives. Today, we will learn about the v-if directive and how to use it to conditionally render elements.

What is the v-if Directive?

The v-if directive allows you to conditionally render an element. It is one of the most powerful directives in Vue.js.

How to Use the v-if Directive?

The basic syntax of the v-if directive is as follows:

<element v-if="condition">

Where:

• element is the element you want to conditionally render.
• condition is a JavaScript expression that determines whether the element will be rendered.

Example

Let’s see an example of how to use the v-if directive to render an element only if the user is logged in:

<div v-if="isLoggedIn">
  <h1>Hello, user!</h1>
</div>

In the above example, the div element will be rendered only if the isLoggedIn property is true.

Other Examples

Let’s see some other examples of how to use the v-if directive:

• Rendering an element only if the value of a property is greater than a certain value:

<div v-if="age > 18">
  <h1>You are of legal age.</h1>
</div>

• Rendering an element only if the user selects an option from a menu:

<div v-if="option === 'option 1'">
  <h1>You selected option 1.</h1>
</div>

JavaScript Expressions in the v-if Directive

You can use JavaScript expressions in the v-if directive to determine whether the element will be rendered.

For example, let’s see an example of how to use the v-if directive to render an element only if the current time value is greater than 12:

<div v-if="new Date().getHours() > 12">
  <h1>Good afternoon!</h1>
</div>

In the above example, the div element will be rendered only if the current time value is greater than 12.

Challenge

Here’s a challenge for you:

• Create a Vue.js application that displays the user’s name only if they are logged in.

Good luck!

Tip

You can use the v-if directive to create a form that only allows the user to submit the form if all required fields are filled.