v-show vs v-if difference in Vue - Hands-On Comparison

Understanding the Difference Between v-show and v-if in Vue

📖 Scenario: You are building a simple Vue app that shows or hides a message based on user interaction. You want to learn how to use v-show and v-if directives to control the visibility of elements.

🎯 Goal: Create a Vue component that toggles a message's visibility using both v-show and v-if so you can see how they behave differently.

📋 What You'll Learn

Create a Vue component with a message string

Add a boolean variable called isVisible to control visibility

Use v-show to toggle the message visibility

Use v-if to toggle the message visibility

💡 Why This Matters

🌍 Real World

In real apps, you often need to show or hide parts of the UI based on user actions or data. Knowing when to use v-show or v-if helps make your app faster and smoother.

💼 Career

Vue developers must understand v-show and v-if to write efficient and maintainable UI code that responds well to user interaction.

1

DATA SETUP: Create the Vue component with a message

Create a Vue component with a message variable set to the string 'Hello Vue!'.

Vue

export default {
  data() {
    return {
      // Your code here
    };
  }
}

Need a hint?

Inside the data() function, return an object with message set to 'Hello Vue!'.

2

CONFIGURATION: Add a boolean isVisible to control visibility

Add a boolean variable called isVisible set to true inside the data() return object.

Vue

export default {
  data() {
    return {
      message: 'Hello Vue!',
      // Your code here
    };
  }
}

Need a hint?

Add isVisible: true alongside message in the returned data object.

3

CORE LOGIC: Use v-show to toggle the message visibility

In the template section, add a <div> that displays message and uses v-show="isVisible" to control its visibility.

Vue

  



export default {
  data() {
    return {
      message: 'Hello Vue!',
      isVisible: true
    };
  }
}

Need a hint?

Use v-show="isVisible" on the <div> that shows the message.

4

COMPLETION: Add another <div> using v-if to toggle the message

Below the v-show <div>, add another <div> that displays message and uses v-if="isVisible" to control its visibility.

Vue

  {{ message }}
  



export default {
  data() {
    return {
      message: 'Hello Vue!',
      isVisible: true
    };
  }
}

Need a hint?

Add a <div> with v-if="isVisible" below the v-show <div>.