Direktiva v-show u Vue-u

Još jedna opcija za uslovno prikazivanje je direktiva v-show. Koristi se na veoma sličan način:

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

Razlika je u tome što će element sa v-show uvek biti iscrtan i ostati u DOM-u, a prebacivaće se samo njegovo CSS svojstvo display.

Direktiva v-if izvodi "pravu" uslovno renderovanje, jer garantuje da su slušači događaja i komponente unutar bloka pravilno uništeni i ponovo kreirani prilikom promene uslova.

Direktiva v-if je takođe lenja: ako je uslov netačan u vreme početnog renderovanja, ona neće ništa uraditi - uslovni blok neće biti iscrtan sve dok uslov ne postane tačan.

Za poređenje, v-show je mnogo jednostavnija - element se uvek iscrtava, bez obzira na početno stanje, sa prebacivanjem zasnovanim na CSS-u.

Generalno, v-if ima veće troškove prebacivanja, dok v-show ima veće troškove pri inicijalnom renderovanju. Stoga koristite v-show, ako će prebacivanja biti česta, i preferirajte v-if, ako se uslov možda i neće promeniti tokom izvršenja.