- [Instructor] In this video, we'll turn our attention
back to our flashcard presenter
and clean up our template using some additional directives
for conditionally displaying elements.
If we look at this first inner div here
inside the div that our app is mounted on,
we have this click handler here
and for the value of that directive
we have a bit of JavaScript code that will be executed
when a user clicks.
And that's instead of perhaps a method call
to handle the click event.
Again, some Vue developers would prefer
not to have any statements like this in their templates.
Personally, I think a simple assignment like this is okay,
but that's about as far as I would go with
actually including imperative code in your template.
And moving inside where we display either the front
or the back of the card in the level two heading
or div element here,
depending on the value of flipped,
this is definitely more logic
than I would usually like to see in a template.
And this type of toggling behavior
can be more elegantly implemented
with some simple if and else directives.
Since we're using Vue, it will be v-if.
So we add v-if here and I might've swapped these elements
if I want it to start with v-if flipped,
but I can also just say v-if.
If the card is not flipped,
then I want to display the front here,
and I can take out this ternary statement
and just change it to cards index.front.
And then for the div, I'll just have v-else.
No value needed, it's just the else condition,
so if flipped is true.
And again, I can remove
part of this ternary and just leave cards index.back.
And while we're cleaning this up,
let's go ahead and create computed properties
for the front text and the back HTML.
So we could just use front and back in our template.
So I'm going to cut this and replace it with just front.
And then I'm going to go down to our Vue options,
add back that computed key,
and...we're going to define a computed property called front,
and we'll need to remember to add,
not only returned, but this in front of cards
and this in front of index.
So I'm just going to copy this for back
and change front to back on the end there.
And now if I go back up here,
I already have front for v-text,
and I can clean this up a little bit.
And for v-html, we have back.
So now, if I refresh, I see the same behavior as before,
but it's implemented in a cleaner, more readable way.
And by the way, because that H2 element
is no longer there to push the description down,
I did sneak some CSS into the stylesheet
to add some padding to that div there,
so it wasn't all the way at the top.
By the way, there's also v-elseif,
which can be pretty useful at times.
For example, I might want to make sure that back
actually exists before rendering it.
So I might have a check for that there.
And you can have as many elements with v-elseif
as you want, followed by an optional v-else at the end.
One thing that's important to understand
about v-if and v-else
is that they determine whether or not
elements actually exist in the DOM
and not just whether they are visible.
So if we pull up the developer tools
and let me flip this back, if we zero in on this H2 here,
you can see that there's no sign of that sibling div tag
until we click.
So it's actually yanking these elements out of the DOM
and then recreating them
as we keep clicking and flipping the card
instead of hiding them with CSS.
But sometimes it's preferable
to hide and reveal elements with CSS,
and we'll talk about how to implement that
in the next video.