How to Use Conditional Statements — Vue.js Beginner’s Guide
By: Vikas Jawla
Tags: Vue, Vuejs, Basics, Vuejs 2, Begineers

Vue.js is one of the most progressive javascript frameworks which is better than Angular and almost as good as React. Now, In this tutorial, we are going to see how we can use the common conditional statements in the vue.js. This tutorial is aimed at the beginners, people who are just starting with the Vue.js. If you are one medium or advanced level, then skip this article and other awesome stuff. So Let’s start this series #BackToBasics

Conditional Statements In Vue.js

The conditional statement allows for conditional execution of code fragments. There are three types of conditional statements that will discuss one by one. Let’s see how we can use them in vue.js template

v-if statements

If statements are executed when the expression is evaluated to its Boolean value. If the expression evaluates to TRUE, the code will be executed, and if it evaluates to FALSE — it’ll ignore it. The following example would display “Now You See Me” string if a is bigger than 0.5:

<div v-if="a > 0.5"> Now you see me </div>

The element and its container directives/components are destroyed and re-constructed during toggles. If the element is an template element, its content will be extracted as the conditional block.

You can use v-if in the template rendering also, it will serve as an invisible wrapper. Below example will demonstrate how you can use that:

<template v-if="true"> <h1>Hey This is the heading</h1> <p>I'm paragraph 1</p> <p>I'm Paragraph 2</p> </template>

v-else statements

Often you’d want to execute a statement if a certain condition is met, and a different statement if the condition is not met. This is what else is for. else extends an if statement to execute a statement in case of the expression in the if statement evaluates to FALSE. The following example would display "Now You See Me" string if a is bigger than 0.5. If not it will display "Now you don't" string:

<div v-if="a > 0.5"> Now you see me </div> <div v-else> Now you don't </div>

v-else-if statements

elseif , as its name suggests, is a combination of if and else. Like else, it extends an if statement to execute a different statement in case the original if an expression evaluates to FALSE. However, unlike else, it will execute that alternative expression only if the elseif conditional expression evaluates to TRUE.

<div v-if="type === 'Value1'">

I'm Visible If type is equal to Value1

</div>

<div v-else-if="type === 'Value2'">

I'm Visible If type is equal to Value2

</div>

<div v-else-if="type === 'Value3'">

I'm Visible If type is equal to Value3

</div>

<div v-else>

I'm Visible If none of the above is true

</div>

There may be several elseifs within the same if statement. The first elseif expression (if any) that evaluates to TRUE would be executed. In Vue.js just like PHP or any other programming language, you can also write else if (in two words) and the behavior would be identical to one of elseif (in a single word). The syntactic meaning is slightly different (if you're familiar with C , this is the same behavior) but the bottom line is that both would result in exactly the same behavior.

The elseif statement is only executed if the preceding if expression and any preceding elseif expressions evaluated to FALSE, and the current elseif expression evaluated to TRUE.

Note: v-if with v-for

Using v-if and v-for together is not recommended. When both of them are used together, v-for has a higher priority than v-if.

So even if we only render elements for a small fraction of values, we have to iterate over the entire list every time we re-render, whether or not the set of values has changed. So, it’s advised not to use v-if with v-for. For a more detailed explanation, follow this link.

That’s it in this article, I hope you get to know a little more about the conditional statement’s use in Vue.js. If you liked this article, then hit the thumbs up icon or comment below with your questions.

If you liked this, Read more like this: