- [Instructor] Next, we'll take a look at a directive
that's very similar to v-if called v-show,
and we'll discuss some of the reasons
you might want to choose one
over the other in certain situations.
Remember what I showed you, at the end of the last video,
when we use v-if and v-else,
the element that's toggled off
is actually removed from the DOM,
but sometimes it's beneficial to not have you create
and destroy these elements on demand,
and instead just hide or reveal them with CSS.
And that's especially true if it's resource intensive
or time consuming to create the elements,
and that's where v-show comes in, to demonstrate,
we're going to introduce a short delay
before returning the computed property back,
which is referenced here.
So before the return statement,
we'll just let an empty loop run, so for zero,
all the way to three times 10 to the ninth.
We'll let that loop run before returning the back content,
and this will just simulate an expensive operation
that fetches or generates this content.
So now that we have that delay,
let's refresh the page
and we'll see how the card flip behaves.
So I'm clicking the card now,
and you can see it takes a few seconds
for it to show me the back,
that's because the div element that was just created,
it didn't exist until we clicked,
and the value of "back" isn't computed until it's needed,
but if I keep clicking,
you can see that the delay has gone
because the computed value of "back" is cached, remember,
that's one of the advantages
of setting this up as a computed property, of course,
when I go to the next card,
I've now changed the value of "index",
which is a dependency of "back"
and "back" must be recomputed
sending it through that artificial delay loop once again.
So I'm clicking now, and I have to wait again.
Finally, we'll get to v-show.
So back up here, we'll change v-if to v-show,
they behave very similarly, except one drawback to v-show,
is that you can't use it with v-else.
But we can just do v-show="flipped".
So refreshing again, once the page loads,
the back content has already been rendered,
although as a hidden element,
and when we get around to flipping the card,
which I'll do now, that value has already been computed,
of course,
if you noticed we did block the initial rendering
of the page with that JavaScript loop,
but in a real application,
we might be loading that data behind the scenes with Ajax,
which would avoid that completely,
since we're on the subject of hiding and revealing things,
it's a good time to talk about v-cloak,
remember that if we wanted to,
we could rewrite this with mustache syntax here
instead of using v-text.
Refresh again, now with that delay,
those curly braces are especially visible,
but if we wanted to hide that element until Vue has loaded,
we can do it with v-cloak.
So we're just going to add the v-cloak directive
here on the h2,
and v-cloak is a special directive
that's always removed as soon as
our view instance has finished compiling, by itself,
it has no effect,
but while it's present we can use it
to hide the h2 element with CSS.
So in my style sheet, I have v-cloak display: none,
and v-cloak is in square brackets
because it's like an attribute.
Now, when we refresh again,
we've hidden the mustache
and the variable name from the user.
In the next video,
we'll talk about rendering
a collection of elements using a for-loop.