Podmíněné zobrazení ve Vue

Další direktiva, kterou se naučíme, se jmenuje v-if. S její pomocí lze zobrazovat nebo skrývat elementy. Jak tato direktiva funguje: jako parametr přijímá jakoukoli vlastnost objektu data. Pokud tato vlastnost má hodnotu true - pak bude element zobrazen, a pokud false - pak skryt.

Podívejme se na příklad. Předpokládejme, že máme odstavec s atributem v-if. Hodnotou tohoto atributu nechť je vlastnost visible, takto:

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

Nastavme hodnotu naší vlastnosti na true. V tomto případě bude odstavec zobrazen:

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

Pokud však visible nastavíme na hodnotu false, odstavec bude skryt:

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