Conditional rendering

Look closely in the Busy component's template. It uses another built-in directive you have not used yet in Vue, as shown in the following example:

<Busy v-if="busy" />

Vue provides a built-in directive that affects the HTML DOM layout: v-if. When applied to an element, the element is rendered to the DOM when the assigned expression evaluates to true; otherwise, it is removed from the DOM. Therefore, the Busy indicator is displayed only when the busy data is true.

Get Hands-On Full-Stack Web Development with ASP.NET Core now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.