Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
In this video we'll explore the differences between v-show and v-if.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
There's one more problem
here that we'll need to fix.
0:00
Some of the media items
don't have contributors, and
0:03
in those instances their
bylines are blank.
0:07
That's not what we want.
0:12
We could definitely use v-show to solve
this problem, and that would work fine,
0:14
but there's another way
that I'd like to show you.
0:18
We can also use a directive called v-if.
0:21
This is another way of saying,
if media.contributor exists,
0:31
render this paragraph,
and if it doesn't, don't.
0:36
You may be wondering
the difference between v-if and
0:43
v-show as they appear to
work in similar ways.
0:46
When would you choose one over the other?
0:49
Let's see what
the documentation has to say.
0:51
Let's google vue js docs.
0:56
And in the docs, in this handy
search bar up here, I'll type v-if.
1:01
You can see right here in the guide,
under the topic of conditional rendering,
1:07
there is a section called v-if versus
v-show, so let's click on that.
1:12
I'll let you read this on your own,
but here's the important part for
1:16
our purposes.
1:21
Prefer v-show if you need to
toggle something very often, and
1:22
prefer v-if if the condition is
unlikely to change at runtime.
1:26
V-show uses CSS-based toggling.
1:30
To show or hide the element, it sets the
element's display to none and back again.
1:34
V-if, on the other hand,
will check if the condition is true.
1:39
In our case, it will check if the value
of media.contributor is true or false.
1:43
And if it's false,
it won't render the element at all.
1:48
So when we're toggling the media details,
1:52
it makes sense to use
the v-show directive,
1:54
because we're frequently toggling
these elements from visible to hidden.
1:57
With the contributor property,
the value is unlikely to change, or
2:01
at least it won't change frequently.
2:06
So it makes sense to use v-if.
2:08
You'll also want to use v-if in
conjunction with the directive called
2:11
v-else, when you need to write more
complex conditionals within a template.
2:15
We'll look at v-else in
the next part of the course.
2:20
For now, let's see how we can use a select
menu to filter this list by type of media.
2:23
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up