Feltételes megjelenítés Vue-ban

A következő direktíva, amelyet meg fogunk tanulni, a v-if. Segítségével megjeleníthetünk vagy elrejthetünk elemeket. A direktíva működése: paraméterként fogadja a data objektum bármely tulajdonságát. Ha ennek a tulajdonságnak a értéke true, akkor az elem megjelenik, ha pedig false, akkor elrejtődik.

Nézzünk egy példát. Tegyük fel, hogy van egy bekezdésünk a v-if attribútummal. Ennek az attribútumnak az értéke legyen a visible tulajdonság, így:

App.vue<template>
  <p v-if="visible">szöveg</p>
</template>

Állítsuk a tulajdonságunk értékét true-ra. Ebben az esetben a bekezdés megjelenik:

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

Ha viszont a visible értékét false-ra állítjuk, akkor a bekezdés elrejtődik:

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