- [Man] In addition to looping through data,
we can also use conditional statements
like we do in JavaScript in our template.
The easiest way to do that is to wrap an element with a div,
so, I'm going to go ahead and do that,
and I'll just create a div right here.
And I'm going to just grab these two columns
that I have in this bootstrap code,
paste them in there,
and then inside this div,
I can do a v-if statement,
and then we can create a condition and we'll say
v-if,
and then, we can create the condition,
so, this can be just a boolean value,
or the value of an expression, sort of like a formula.
So, we could say something like,
item price
is less than or equal to sum number here.
So, what I'll do is, I'll create a variable called
maximum here for now,
and I'm going to need to create
that variable in the JavaScript,
so, right now, the data only has the products,
I'll go ahead and create a maximum variable,
and set that to a number,
think I'll start with the number 99 here,
and then, make sure I add a comma,
so, we have two items here.
The maximum variable as well as the products
that is the array of the elements that we have,
and, so now, here, I'm saying,
if the item price is less than whatever that number is,
then, what it's going to do is
display this series of elements if that is true,
now I need to be careful here because
it may read this as a string,
so, what I'll do is use the number function from JavaScript,
and put that in here to make sure that we are getting
a number, and it's a proper comparison,
so, let's take a look at what we get now,
and we should only see two of the items
because there's three of them, and one of them is $125,
if we happen to change the value of 99 here to,
let's say, 200, you should see this reloading
and showing you the other item.
Let's go ahead and switch it back to 99.
So, the v-if is really useful,
but, you can also use it within your v-for statement.
So, if you want to,
you don't really need to wrap it around a div,
you just can move this v-if right here
underneath or in the same place as the v-for,
and, whenever I have something that wide,
I like to sort of split it up,
at least visually into different sort of pieces here.
Then, we can really just get rid of this div,
we don't really need to sort of
encapsulate things, sometimes we do want to do that,
but, we don't really need to do it
for this particular item here.
And now, you'll see that it works in exactly the same way.
Sometimes it's more convenient to just put it in here,
in addition to the v-if statement,
we also have other options, so, for example,
v-else and v-else-if are two of the other options.
This is quite a rich set of directives
that you can use in your applications,
and it allows you to very quickly create some
conditional templating within your apps.