From the course: Vue.js 3 Essential Training

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Conditional data

Conditional data

- [Instructor] Vue.js has a few different directives that display content, depending on the value of variables or formulas. There's a whole family of conditional statements. And you can see that they pretty much correspond to the things that you would find in regular JavaScript, but they're designed to work on your templates instead. So let's go through each of these. Now the first is of course, v-if, it lets you test for the statements truthiness, and it looks like this, you create a v-if directive and then you pass along some sort of statement that returns true. A lot of times you'll see that it's just a variable and here I created a sample variable called myBool. So if the value of myBool is true, then this entire div would display in your application. Of course, there's a v-else statement that does something if the first v-if statement is not true. So it looks like this, and you create your v-if just like before, but…

Contents