LU05d - v-show - TBD

1. ….

The v-show directive in Vue.js is used to conditionally display elements based on a boolean expression. Unlike v-if, which completely removes elements from the DOM when the condition is false, v-show toggles the CSS display property, keeping the element in the DOM but hiding it visually. This makes v-show more efficient when elements need to be frequently shown or hidden without re-rendering. It is best suited for UI toggles, such as modals, dropdowns, or tooltips.

The syntax is simple: isVisible controls the visibility of the element dynamically

<div v-show="isVisible">Content</div>

<template>
  <div>
    <button @click="isVisible = !isVisible">
      Toggle Message
    </button>
    <p v-show="isVisible">Hello, Vue.js!</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isVisible: true
      };
    }
  };
</script>

Explanation: The v-show=„isVisible“ directive controls the visibility of the <p> element.

• Clicking the button toggles isVisible between true and false.
• Instead of removing the element from the DOM, Vue modifies its display property.

Volkan Demir