Sobes.tech
Junior

Norādiet atšķirības starp v-show un v-if direktīvām.

sobes.tech AI

Atbilde no AI

v-if nosacīti attēlo elementu un pilnībā to noņem no DOM, ja nosacījums ir nepaties. v-show vienmēr attēlo elementu, bet pārslēdz tā CSS īpašību display starp none un sākotnējo vērtību atkarībā no nosacījuma.

Atšķirības veiktspējā / lietojumā:

  • v-if: Sākotnējais renderēšana ir smagāka, bet labāka veiktspēja retu pārslēgšanu gadījumā, jo elementi tiek pilnībā noņemti no DOM.
  • v-show: Vieglāka sākotnējā renderēšana, bet labāk piemērota bieži pārslēgtiem elementiem, jo tas tikai maina CSS īpašību.

Piemērs lietošanai:

<!-- v-if izmantošana -->
<template>
  <div v-if="isVisible">
    Šis bloks ir redzams tikai tad, ja isVisible ir patiesi
  </div>

  <!-- v-show izmantošana -->
  <div v-show="isVisible">
    Šis bloks vienmēr ir DOM, bet redzams tikai tad, ja isVisible ir patiesi
  </div>
</template>

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