Показване по условие във Vue

Следващата директива, която ще изучим, се нарича v-if. С нейна помощ може да се показват или скриват елементи. Как работи тази директива: като параметър приема всяко свойство на обекта data. Ако това свойство има стойност true - тогава елементът ще бъде показан, а ако false - тогава скрит.

Нека разгледаме пример. Да предположим, че имаме абзац с атрибут v-if. Стойността на този атрибут нека бъде свойството visible, ето така:

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

Нека зададем стойността на нашето свойство на true. В този случай абзацът ще бъде показан:

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

А ето ако visible се зададе като стойност false, тогава абзацът ще бъде скрит:

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