Conditional Rendering

The v-if directive

Earlier when we set up the eventData array, it was recommended to set some of these dates to be in the past, and some in the future:

{
  id: 1,
  name: "Graduation",
  details: "wooohoo!!!",
  date: "2027-09-25",
  background: "linear-gradient(135deg, #FF416C, #FF4B2B)",
}

If you have not yet done this, now would be a good time. Set at least 1 date to be in the past, one to be with today's date, one to be tomorrows date, and another with any other future date. This will help with testing things out very soon.

This lesson is going to use conditional rendering. This is a way of only showing something, such as an event, when a certain condition is met. In our case, the condition is the number of days left.

Soon, we will add the option to toggle the view to show/hide past events. This lesson will focus on updating the text in out app:

• If an event is more than 1 day in the future: Display days left.
• If an event is tomorrow: Display day left.
• If an event is more than 1 day in the past: Display days ago.
• If an event is yesterday: Display day ago.
• If an event is today: Display today.

In the Event.vue component, the text of days left is always used:

<small>days left</small>

Update this to use the Vue.js v-if directive:

<small v-if="daysLeft === 0">today</small>

• v-if: This is a Vue.js directive to render a block if a condition is truthy.

This takes care of the events happening today.

The v-else-if directive

On the following line, create a second <small> element to handle the days left text, this will use the v-else-if directive:

<small v-if="daysLeft === 0">today</small>
<small v-else-if="daysLeft > 0">days left</small>

• v-else-if: This is a Vue.js directive which works like a JavaScript "else if" statement. It provides additional conditions if the v-if condition is not met.
• Multiple v-else-if blocks can be used in sequence (chained).
• The v-else-if block must immediately follow a v-if block, or a v-else-if if chained.

The v-else directive

<small v-if="daysLeft === 0">today</small>
<small v-else-if="daysLeft > 0">days left</small>
<small v-else>days ago</small>

• v-else: This is a Vue.js directive which works like a JavaScript "else" statement. It will run if the previous v-if/v-else-if conditions are not met.
• It must immediately follow a v-if or v-else-if block.

📝 Note: These directives work just like regular JavaScript, and will render when the condition is "truthy".

This will handle three outcomes:

• any day in the future
• [] tomorrow
• any day in the past
• [] yesterday
• today

JavaScript expressions

The final change is to handle if an event is yesterday or tomorrow. For future events we can render the text of "day left" or "days left" depending if the number is 1:

<small v-else-if="daysLeft > 0">
    {{ daysLeft === 1 ? "day" : "days" }} left
</small>

• Using Vue.js template syntax ({{ }}), we can include a JavaScript expression.
• This example uses the JavaScript conditional (ternary) operator to provide two outcomes depending if daysLeft === 1.

Then in the else block, we update the text to render either "day ago" or "days ago":

<small v-else>{{ daysLeft === -1 ? "day" : "days" }} ago </small>

Leaving the completed final section like this:

<div>
    <p class="days_left">{{ daysLeft }}</p>
    <small v-if="daysLeft === 0">today</small>
    <small v-else-if="daysLeft > 0"
        >{{ daysLeft === 1 ? "day" : "days" }} left
    </small>
    <small v-else>{{ daysLeft === -1 ? "day" : "days" }} ago </small>
</div>

📝 Note: An additional v-else-if blocks could also be used to updte the text if preferred.

The v-show directive

Vue.js also provides a directive called v-show. This appears to work like v-if on the surface, but there are differences.

• The v-show directive is a simpler way to conditionally render, toggling the display using CSS.
• This results in elements remaining in the DOM rather than being properly removed/destroyed as with v-if.
• v-if also removes and child components and event listeners when removed.
• v-show can not be used in combination with <template> elements, or in combination with v-else.

Since v-show is always present in the DOM and the CSS display property is used, it can be good choice if we expect to toggle on a regular basis.