Conditional Rendering in Vue.js

What You’ll Learn 📚

• Understanding the basics of conditional rendering
• Key terminology explained simply
• Step-by-step examples from simple to complex
• Common questions and their answers
• Troubleshooting tips for common issues

Introduction to Conditional Rendering

Conditional rendering in Vue.js allows you to control what gets displayed in your application based on certain conditions. It’s like saying, “Hey Vue, show this if this condition is true, otherwise show something else!” This is super useful for creating dynamic and interactive user interfaces.

Key Terminology

• Conditional Rendering: The process of showing or hiding elements in the UI based on certain conditions.
• v-if: A directive in Vue.js used to conditionally render elements.
• v-else: Used in conjunction with v-if to provide an alternative rendering.
• v-else-if: Used to chain multiple conditions together.

Simple Example: v-if

<div id='app'>
  <p v-if='isVisible'>Hello, Vue.js!</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});
</script>

Progressively Complex Examples

Example 1: v-if and v-else

<div id='app'>
  <p v-if='isLoggedIn'>Welcome back!</p>
  <p v-else>Please log in.</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isLoggedIn: false
  }
});
</script>

Example 2: v-else-if

<div id='app'>
  <p v-if='score >= 90'>A+</p>
  <p v-else-if='score >= 80'>A</p>
  <p v-else>Keep trying!</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    score: 85
  }
});
</script>

Example 3: Using v-show

<div id='app'>
  <p v-show='isVisible'>This is always in the DOM but toggled with CSS.</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});
</script>

Common Questions and Answers

1. What is the difference between v-if and v-show?

   v-if completely removes the element from the DOM if the condition is false, while v-show simply toggles the visibility using CSS. Use v-if for conditions that change infrequently and v-show for conditions that change often.

2. Can I use v-if and v-show together?

   It’s generally not recommended as they serve similar purposes but in different ways. Choose one based on your specific needs.

3. Why isn’t my v-if condition working?

   Ensure that your condition is a valid boolean expression and that the data property is reactive (i.e., defined in the data object).

Troubleshooting Common Issues

Ensure your Vue instance is correctly initialized and that the el property matches the id of your HTML element.

Remember, v-if and v-show are not interchangeable. Use them according to your needs for performance and DOM manipulation.

Practice Exercises

1. Create a Vue component that displays a message based on the time of day (morning, afternoon, evening).
2. Build a simple quiz app that shows different messages based on the user’s score.

Don’t worry if this seems complex at first. Practice makes perfect, and soon you’ll be a pro at conditional rendering in Vue.js! 🚀

For more information, check out the official Vue.js documentation on conditional rendering.