Sobes.tech
Junior

Numește diferențele dintre directivele v-show și v-if.

sobes.tech AI

Răspuns de la AI

v-if condiționează redarea unui element, eliminându-l complet din DOM dacă condiția este falsă. v-show redă întotdeauna elementul, dar comută proprietatea sa CSS display între none și valoarea inițială în funcție de condiție.

Diferențe în performanță / utilizare:

  • v-if: Randare inițială mai grea, dar performanță mai bună în caz de comutări rare, deoarece elementele sunt eliminate complet din DOM.
  • v-show: Randare inițială mai ușoară, dar mai bun pentru elemente care se schimbă frecvent, deoarece schimbă doar proprietatea CSS.

Exemplu de utilizare:

<!-- Utilizarea v-if -->
<template>
  <div v-if="isVisible">
    Acest bloc este vizibil doar dacă isVisible este adevărat
  </div>

  <!-- Utilizarea v-show -->
  <div v-show="isVisible">
    Acest bloc este întotdeauna în DOM, dar vizibil doar dacă isVisible este adevărat
  </div>
</template>

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