In this lesson, we are going to learn VueJS conditional rendering which is the If else condition. In VueJs, there are pre-built in condition directive which are the v-if, v-else, and v-else-if. There is also another condition directive called v-show which will be explained in the next tutorial.
The idea to have this conditional rendering is to only show if a particular condition we want to apply is showing on the user interface. Let says we have a very simple example below. We want to display a message if the flag data variable is equal to true.
<!doctype html>
<html>
<head>
<title>bytutorial.com - If Else Condition</title>
</head>
<body>
<div id="app">
<h3 v-if="flag">This heading will appear if the flag equals to true.</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
flag: true
}
});
</script>
</html>
If you have a look at the above example. We declare a data variable named flag with a value to true. We then place a v-if condition in the h3 heading. Basically, based on the logic we have the H3 heading will be displayed because the flag equals true. You can see the result below.
Alternatively, when you are checking the boolean value, you can also use the symbol comparison ==. See below code.
<h3 v-if="flag == true">This heading will appear if the flag equals to true.</h3>
You can also see the real demo of the above code in the following link.
See the VueJs vue-if condition.
The next example is we are going to use the v-else-if and v-else conditions. Let's say we make a question of the favorite food for a user to choose. There will be 3 options available. What we want to do if there is no option is selected or chosen. We want to notify the user that the option has not been selected. Once the option of the favorite food is chosen. We then display a message depends on the user's selection.
Here is the full code.
<!doctype html>
<html>
<head>
<title>bytutorial.com - If Else Condition</title>
</head>
<body>
<div id="app">
<p>Please choose your favourite food.</p>
<select v-model="selectedValue">
<option value="">Select Your Favourite Food</option>
<option value="1">Fried Rice</option>
<option value="2">Pasta</option>
</select>
<p v-if="selectedValue == 1">You have choosen the fried rice as your favourite food. Good choice!!!</p>
<p v-else-if="selectedValue == 2">Well we have the same taste. I also love pasta!!!</p>
<p v-else>You have not selected any option yet.</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selectedValue: ""
}
});
</script>
</html>
If you have a look at the above code. We declared a data variable called selectedValue. This data variable is then set as the Vue model against the select box HTML. Basically when you perform a selection of the select box. This variable model will hold the select box value. For example: If you select Fried Rice, the variable model will hold a value of 1.
Just under the select box, you can see there are three paragraphs where the v-else directive is attached to this paragraph. Each of this directive represents the value of select box selection. For example, We are going to display the pasta food message if we choose option 2. Please see the resulting screenshot below.
You can see the demo in the following link.
See VueJS v-else-if condition.
Download
To download the demo files. Please click the following URL link.