The Delightful World of Vue
v-if, v-show and Conditional Classes
  Start your All-Access Pass to unlock this challenge
Buy Access Login

Challenge 1 / 3

Pizza time! Check out the following component where we need to hide or show a "Loading" message depending on a loading state.

<template>
    <span>Loading...</span>

    <h1>Pizza Menu</h1>

    <pizza-menu-list />
</template>

<script>
import PizzaMenuList from '@/components/pizza-menu-list';

export default {
    name: 'MainComponent',
    components: {
        PizzaMenuList
    },
    data() {
        return {
            loading: true,
        };
    },
};
</script>

What is the best way to hide and show the "Loading" <span>?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.