LU05c - v-if

1. I can explain what directive v-if fulfil within the DOM.
2. I can name the three v-if variants that are possible in principle.
3. I can apply v-if to specific examples.

• W3School - v-if
• Vue.org - v-if

The v-if directive in Vue.js is used to conditionally render elements in the DOM. If the condition provided in the v-if evaluates to true, the element is rendered; otherwise, it is removed from the DOM entirely. This makes v-if a powerful tool for controlling the visibility of elements based on dynamic data.

<div id="app">
  <button @click="toggleMessage">Toggle Message</button>
  <p v-if="isVisible">Hello, Vue.js!</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggleMessage() { this.isVisible = !this.isVisible;
    }
  }
  });
</script>

In this example above, the paragraph element (<p>) is conditionally displayed based on the value of the isVisible data property. Clicking the button toggles the message's visibility.

There are basically three variants of v-if:

1. v-if
2. v-else-if
3. v-else

• Used to conditionally render an element based on whether the condition evaluates to true.
• If the condition is false, the element is completely removed from the DOM.

Example:

<p v-if="isVisible">This is visible when isVisible is true.</p>

• Used to create an additional condition in conjunction with v-if.
• orks like an else-if statement in programming, allowing multiple conditions to be checked.

<p v-if="condition === 'A'">Condition A is true.</p>
<p v-else-if="condition === 'B'">Condition B is true.</p>

• Provides a fallback for when none of the v-if or v-else-if conditions are met.
• It does not accept any condition and must directly follow v-if or v-else-if.

<p v-if="condition === 'A'">Condition A is true.</p>
<p v-else-if="condition === 'B'">Condition B is true.</p>
<p v-else>Neither condition A nor B is true.</p>

Volkan Demir