"CSS Basics (2014)" was retired on July 12, 2021. You are now viewing the recommended replacement.
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