Podmienené zobrazenie vo Vue

Ďalšia direktíva, ktorú sa naučíme, sa volá v-if. S jej pomocou môžeme zobrazovať alebo skrývať prvky. Ako táto direktíva funguje: ako parameter prijíma ľubovoľnú vlastnosť objektu data. Ak má táto vlastnosť hodnotu true - potom bude prvok zobrazený, a ak false - potom bude skrytý.

Pozrime sa na príklad. Nech máme odsek s atribútom v-if. Hodnotou tohto atribútu nech je vlastnosť visible, takto:

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

Nastavme hodnotu našej vlastnosti na true. V tomto prípade bude odsek zobrazený:

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

A ak nastavíme visible na hodnotu false, potom bude odsek skrytý:

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