Vue'i direktiiv v-show

Veel üks võimalus tingimustega kuvamiseks on direktiiv v-show. Seda kasutatakse väga sarnaselt:

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

Erinevus seisneb selles, et element v-show-ga renderdatakse alati ja jääb DOM-i, kuid lülitub vaid selle CSS omadus display.

Direktiiv v-if teostab "päris" tingimusliku renderdamise, kuna tagab, et sündmuste kuulajad ja lapskomponendid ploki sees hävitatakse ja luuakse uuesti õigesti tingimuse lülitumisel.

Direktiiv v-if on samuti laisk: kui tingimus on algsel renderdamisel väär, siis see ei tee midagi - tingimuslik plokk ei renderdata enne, kui tingimus muutub tõeseks.

Võrdeldes on v-show palju lihtsam - element renderdatakse alati, sõltumata algseisundist, lülitudes CSS-i põhjal.

Üldiselt on v-if-l suuremad lülitumiskulud, sel ajal kui v-show-l on suuremad algse renderdamise kulud. Seega kasutage v-show, kui lülitumised on sageli, ja eelistage v-if, kui tingimus ei pruugi käitamise ajal muutuda.