Ehdollinen näyttäminen Vuessa

Seuraava direktiivi, jonka opimme, on nimeltään v-if. Sen avulla voidaan näyttää tai piilottaa elementtejä. Miten tämä direktiivi toimii: parametrina se ottaa minkä tahansa data-objektin ominaisuuden. Jos tällä ominaisuudella on arvo true - niin elementti näytetään, ja jos false - niin piilotetaan.

Katsotaanpa esimerkkiä. Olkoon meillä kappale, jolla on v-if-attribuutti. Tämän attribuutin arvoksi olkoon ominaisuus visible, näin:

App.vue<template>
  <p v-if="visible">teksti</p>
</template>

Asetetaanpa ominaisuutemme arvoksi true. Tässä tapauksessa kappale näytetään:

javascriptdata() {
  return {
    visible: true,
  }
}

Mutta jos visible asetetaan arvoon false, niin kappale piilotetaan:

javascriptdata() {
  return {
    visible: false,
  }
}