- [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 then you can specify what happens
if that statement isn't true
and it would display this div right here.
There's also a v-else-if statement
that allows you to go through different values.
So here you create a v-if statement
and you're testing for a value here,
notice that I'm using single quotes inside,
and that's because I'm using quotes in this v-if statement.
So I have to use single quotes
so that the interpreter doesn't get confused.
And you can see that I have a number
of v-else-if statements that output different divs,
depending on the value of this variable.
You can also have a v-else statement
that outputs this div if none of these values are true.
You can also hide the containers using the template tag
like we did with the v-for statement.
So if you have something like this,
a lot of times the div that has the v-if statement,
isn't really something that you necessarily need.
However, if you want to just output the contents
without that div, you can then use this template tag
and this template tag will not show up
in your rendered HTML.
Another statement you can use is called v-show.
It's similar to v-if with some important differences.
v-show only hides the display property of the element,
so it will render the element always,
it's just that it's not going to show it.
Now v-show doesn't support the template tag or v-else.
However, it can be useful if you're creating an element,
who's display you want to toggle on and off often.
Now, using v-if with v-for is not recommended,
and that's because v-if has a higher priority than v-for.
So in this example, the v-if statement wouldn't have access
to the variable myBool.
You can fix it by splitting the conditions
and if you don't need to output the tag,
you can use at the template element like this.
If you want more information
about the conditional data statements,
you can go to the documentation at this URL.
Let's check this out in context, by doing a practice.
Let's go to the problem to show you
what I've got going on right here.
So just like before I have a series of products,
this list is a lot longer than before,
and let's go ahead and collapse that.
Nothing else is really new here in the JavaScript.
Here I have pretty much the template that I had
before except that I've added these different tags
right here for the different products
and so we're going to use v-if statements
to show some of these and not the others.
So here's what I want you to do.
I want you to use v-if statement to show products
that are cheaper than $99.
You can also use a template tag when necessary,
so that you create a v-if statement
that doesn't show an extra div tag.
You can also try to see what happens
if you use a v-if statement,
and when you use a v-show statement instead
to take a look at the difference in what you get.
And also try using v-else and v-else-if
to show the different badges, depending on the price.
Let's see what this looks like when we're done.
So you can see that I'm only showing the items
that are cheaper than $99.
And also I'm only showing one of these labels,
and the labels change depending on the price of the items.
So when we get to very cheap items down here,
you can see that it shows this sale tag.
As usual you can find the difference of these two solutions
at this URL.
So let's go ahead and get started with this problem.
So first of, I'm going to create a new variable here,
and I'm going to call it max and give it a value of $99.
Actually let's go ahead and give it a value of a $100.
We need to put a comma here as well,
and don't worry about the right-hand side
while you're working.
It might be good to hide this, or just make it really small,
so it doesn't bother you.
In addition to this, let's go ahead and see
if we can get rid of these items that are more expensive.
There's only really one that's more expensive here
than $100.
So let's go ahead and try using a v-if statement.
So typically you would use a div here
and let's go ahead and select all of this code
and just place it in this div statement.
And then now, since we have that max variable,
we can use a v-if statement, and we can say,
because we're going through the items in this v-for,
we can target the item where the price
is less than or equal to the max.
And we need to close out that quote right here.
Now this is something you have to watch out for.
Sometimes if you're testing numbers like this
that you have entered here,
you may want to make sure that they are numbers indeed.
So a lot of times you'll see me use the JavaScript
number method to cast whatever I get from max into a number.
So that's what I'm doing here.
It didn't really make a huge difference in my template,
but oftentimes you'll see that
when you try to make comparisons
and you don't have this number right here,
it's going to have a problem
because it's actually comparing text
instead of an actual number so be careful.
Now as I mentioned, we can't change this,
let's go ahead and indent this a little bit
so that it looks better.
And if we don't want this extra div,
there's a lot of divs already in here,
so we can use the template tag
and then that div will not work anymore.
So let's see if anything happens.
Also, if instead of v-if if we use v-show,
it's not going to work.
As I mentioned, it doesn't work if you use a template.
And so let's actually try changing this back to a div
and see if we get anything at all.
It seems to work, not exactly like before,
but it is giving us something.
But v-show, I don't really use v-show that much.
I think it's an older ujs command,
but you can see that template is pretty useful,
and let's go ahead and go back to an v-if statement here.
So I find a template to be super useful.
So there's almost never a good reason to use v-show,
unless you really are toggling that item quite a bit.
So let's try now working on our different labels.
Now to do that, we will use some v-if statements
on each one of these items.
So we'll say v-if item,
the price is greater than or equal to 90 here,
and so we'll need to do that a few times.
We'll just grab this one and copy it and paste it
on these other ones.
And then we'll change the value.
So first we'll do a v-else-if statement here,
and we're going to need to test a range here.
So this will be item price is less than 90.
So we'll say less than 90 here.
And item...
Let's make it wider here so we can see everything.
And item the price is greater than 10.
So now you can see that it's already kind of showing you
some of the labels here, but none of the other ones.
And then down here,
all we have to do is add a v-else statement.
So v-else,
and make it a sale.
So now, you can see that it's only showing items
that are a $100 or less than $100,
and then it's showing you different labels,
depending on whether the price is greater than $90
like these two, and also the value a tag for this one.
And then at the way bottom, you can see the sale tag
for that last one right there.
So that's how you control things
with conditional statements.
They're particularly useful when working with lists,
just watch out that you don't try to use
a v-if with a v-for.
Although you can get away with it sometimes,
it's not really safe to use both of those together,
and it's perfectly fine to split it up
using a template like we just did right here.