Intro to Vue.js

Lessons

1. The Vue Instance

5:42

2. Attribute Binding

2:46

3. Conditional Rendering

3:44

4. List Rendering

2:16

5. Event Handling

4:13

6. Class & Style Binding

5:06

7. Computed Properties

4:57

8. Components

6:20

9. Communicating Events

4:38

10. Forms

9:34

11. Tabs

7:32

Conditional Rendering

In this lesson we’ll be uncovering how to conditionally display elements with Vue.

Our Goal

We want to display text that says if our product is in stock or not, based on our data.

Starting Code

Notice we’ve added a new data property there at the bottom: inStock.

Problem

Often in a web application, we want elements to appear on the page depending on if a condition is met or not. For instance, if our product is not in stock, our page should display the fact that it’s out of stock.

So how could we conditionally render these elements, depending on whether our product is in stock or not?

Solution

Vue’s solution is simple and straightforward.

Given that our data contains this new property:

We can use the v-if and v-else directives to determine which element to render.

If inStock is truthy, the first paragraph will render. Otherwise, the second paragraph will. In this case, since the value of inStock is true, the first paragraph will render.

Great. We’ve used conditional rendering to display whether our product is in stock or not. Our feature is done. But let’s explore conditional rendering some more before we move onto our next topic.

Additional Conditional Syntax: v-else-if

We can add a third degree of logic with v-else-if. To demonstrate, let’s use an example that is a bit more complex.

If our data looked something like this:

We could use expressions, inside the quotes, to make our conditions more specific.

The element that will render is the first element whose expression evaluates to true.

Additional Conditional Syntax: v-show

If your app needs an element to frequently toggle on and off the page, you’ll want to use the v-show directive. An element with this directive on it will always be present in our DOM, but it will only be visible on the page if its condition is met. It will conditionally add or remove the CSS property display: none to the element.

This method is more performant than inserting and removing an element over and over with v-if / v-else.

However, in the product app we’re building, using a v-if and v-else works just fine, so we’ll keep that as our solution.

What’d we learn

  • There are Vue directives to conditionally render elements:
    • v-if
    • v-else-if
    • v-else
    • v-show
  • If whatever is inside the directive’s quotes is truthy, the element will display.
  • You can use expressions inside the directive’s quotes.
  • V-show only toggles visibility, it does not insert or remove the element from the DOM.

Learn by doing

Challenge:

Add an onSale property to the product’s data that is used to conditionally render a span that says “On Sale!”