The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Conditional Rendering

Next ►
►

Conditional rendering in Vue.js allows you to control the visibility of elements in your application based on certain conditions. This is a fundamental concept that helps in creating dynamic and interactive user interfaces.

Key Concepts

  1. v-if Directive: Renders the element only if the expression evaluates to true.
  2. v-else Directive: Used to define an "else" block for v-if.
  3. v-else-if Directive: Used to chain multiple conditions.
  4. v-show Directive: Toggles the visibility of an element based on the expression, but the element remains in the DOM.

v-if Directive

The v-if directive is used to conditionally render an element. If the expression evaluates to true, the element is rendered; otherwise, it is not.

Example

<div id="app">
  <p v-if="isVisible">This paragraph is visible.</p>
</div>

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

In this example, the paragraph will be rendered because isVisible is true.

v-else Directive

The v-else directive is used to provide an alternative block to v-if.

Example

<div id="app">
  <p v-if="isVisible">This paragraph is visible.</p>
  <p v-else>This paragraph is not visible.</p>
</div>

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

Here, the second paragraph will be rendered because isVisible is false.

v-else-if Directive

The v-else-if directive allows you to chain multiple conditions.

Example

<div id="app">
  <p v-if="status === 'success'">Operation was successful.</p>
  <p v-else-if="status === 'error'">There was an error.</p>
  <p v-else>Unknown status.</p>
</div>

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

In this example, the second paragraph will be rendered because status is 'error'.

v-show Directive

The v-show directive toggles the visibility of an element based on the expression, but unlike v-if, the element remains in the DOM.

Example

<div id="app">
  <p v-show="isVisible">This paragraph is visible.</p>
</div>

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

In this example, the paragraph will be visible because isVisible is true. If isVisible were false, the paragraph would still be in the DOM but hidden.

Comparison of v-if and v-show

Feature v-if v-show
Rendering Element is added/removed from the DOM Element is always in the DOM, visibility is toggled
Performance Higher cost for toggling Lower cost for toggling
Use Case When elements are conditionally rendered infrequently When elements are toggled frequently

Practical Exercise

Task

Create a Vue.js application that uses conditional rendering to display different messages based on the value of a data property.

Steps

  1. Create a new Vue instance.
  2. Add a data property called status with possible values: 'loading', 'success', 'error'.
  3. Use v-if, v-else-if, and v-else to display different messages based on the value of status.

Solution

<div id="app">
  <p v-if="status === 'loading'">Loading...</p>
  <p v-else-if="status === 'success'">Data loaded successfully!</p>
  <p v-else-if="status === 'error'">Failed to load data.</p>
  <p v-else>Unknown status.</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      status: 'loading' // Change this value to 'success', 'error', or any other string to test
    }
  });
</script>

Explanation

  • The v-if directive checks if status is 'loading' and renders the corresponding message.
  • The v-else-if directives check for 'success' and 'error' statuses and render the appropriate messages.
  • The v-else directive handles any other values of status.

Common Mistakes and Tips

  • Mistake: Using v-if and v-show interchangeably without considering performance implications.
    • Tip: Use v-if for elements that are conditionally rendered infrequently and v-show for elements that are toggled frequently.
  • Mistake: Forgetting to provide a fallback with v-else when using v-if.
    • Tip: Always consider adding a v-else block to handle unexpected conditions.

Conclusion

In this section, you learned how to use Vue.js directives like v-if, v-else, v-else-if, and v-show to control the visibility of elements based on conditions. Understanding these directives is crucial for creating dynamic and interactive applications. In the next section, we will explore list rendering, which allows you to render lists of items efficiently.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved