v-show vs. v-if2:29 with Treasure Porth
In this video we'll explore the differences between v-show and v-if.
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 up