From the course: Learning Vue.js

Conditional rendering with v-show - Vue.js Tutorial

From the course: Learning Vue.js

Start my 1-month free trial

Conditional rendering with v-show

- [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.

Contents