>> Hi, I'm Christopher Harrison.
I'm a Senior Cloud Advocate at Microsoft
and what I want to take a look at
in this section is how we can inject
a bit of logic using a Vue.
Now, the two things that we're going
to examine in this video is how we can
determine whether or not we want
to show something and then also
how we could inject a little bit
of Boolean logic by using an if statement.
Now, inside of my app,
what I have right now is a single object
that I'm going to be returning back
that's going to be our cruise.
You'll notice that we've got seatsAvailable,
we've got a flag on whether or not
something is early bird,
and we've got a name.
What I want to do is I want to display
out a name and then determine
whether or not I want to display
a buy button based on whether or not
there are seats available.
Let's go ahead and start off
by adding in a div here
and let's go ahead and display the name,
which I'll be able to do by using cruise.name,
and that will display out the display at the cruise.
Now, I'm using Live Share for this,
which is a fantastic VS Code extension.
It'll be linked in the description below.
So every time I save,
it will then refresh my page,
and so now we can see cruise to moon
over there on the right side.
Now, I want to add in a button,
and this button will say Book now, like that.
Let me go ahead and hit "Save",
and so now we've got our little Book now.
But I only want to display that
if it turns out that there are seats available,
and this is where that Vue show comes into play.
What I'm going to do
is I'm going to say v-show.
Now, this will accept either a little bit
of logic or just a Boolean value
on whether or not we want to,
well, show something.
I want to do this based on
whether or not there are seats available.
Let me go ahead,
and say cruise.seatsAvailable.
There we go.
You know what I'm going to do,
I'm just going to make this
a little bit easier to read.
There we go.
Now, we can our see v-show.
Now, let me save this,
and right now there's no change,
because seatsAvailable is true.
But if I change this to false,
and now let me go ahead
and save to let the page refresh.
Now, you're going to notice
that there's no button.
If I leave this as true,
again, save, we get the button.
If I make that as false,
then it will take the button away.
That's what v-show will allow us to do
and it's probably one of the most
common things that you'll be reaching for,
because a lot of times,
you need to determine whether or not
you're going to display something
based on some Boolean value.
Now, we can also go one step further
if we want and add in an if statement.
Let's say, I want to change the text
that we're going to display.
Maybe it's going to be Book now,
if it turns out that there are just regular seats available.
But if it's early bird,
maybe what I want to do instead
is I want to say Book early bird.
There we go.
Now, the way that I'm going to
be able to do this is by utilizing
the v-if and v-else statement.
By the way, there is a v-else if
as well if you need it.
I'm going to say v-if,
and this will work very similar
to a normal Boolean statement,
where what I can do is either pass in
an expression or a Boolean value.
In my case, it's going to be whether
or not there's early bird available.
Let me say cruise earlyBirdAvailable,
there we go.
Let's go ahead and do my v-else
down below for the Book now.
Now, you can see that we've got
an if and an else statement.
If there's an earlyBird,
it's going to say Book early or earlyBird,
and if it turns out that there isn't,
then it will go ahead and just simply
display out that Book now.
By the way, if you're not familiar
with the phrase early bird,
it's an expression just to indicate that
hey, if you, maybe by early
that you'll be able to get a discounted price.
Let me go ahead and save this,
and so it will tell me Book now.
If I go ahead and I change
this earlyBird to be true,
and now let me go ahead and save.
Now, you'll notice that
that updates to be Book earlyBird.
That's how you can determine
whether or not you want to show
something by using v-show
and how you can inject Boolean logic
by using the if and the else statements inside of Vue.
[MUSIC]