Direktiva v-show në Vue

Një tjetër mundësi për shfaqje të kushtëzuar është direktiva v-show. Përdoret në mënyrë shumë të ngjashme:

html<template>
  <p v-show="isAuth">
    +++
  </p>
</template>

Ndryshimi është se elementi me v-show do të jetë gjithmonë i renderuar dhe do të mbetet në DOM, dhe do të ndërrohet vetëm vetia e tij CSS display.

Direktiva v-if kryen një renderim të vërtetë të kushtëzuar, pasi garanton që dëgjuesit e ngjarjeve dhe nënpërbërësit fëmijë brenda bllokut shkatërrohen dhe rikrijohen si duhur gjatë ndërrimit të kushtit.

Direktiva v-if është gjithashtu dembel: nëse kushti është i rremë në kohën e renderimit fillestar, atëherë ajo nuk do të bëjë asgjë - blloku i kushtëzuar nuk do të renderohet derisa kushti të bëhet i vërtetë.

Krahasuar, v-show është shumë më e thjeshtë - elementi renderohet gjithmonë, pavarësisht nga gjendja fillestare me ndërrim të bazuar në CSS.

Në përgjithësi, v-if ka kosto më të larta të ndërrimit, ndërsa v-show ka më shumë kosto në renderimin fillestar. Pra, përdorni v-show, nëse ndërrimet do të jenë të shpeshta, dhe preferoni v-if, nëse kushti mund të mos ndryshojë gjatë ekzekutimit.