Wyświetlanie warunkowe w Vue

Następna dyrektywa, którą poznamy, nazywa się v-if. Za jej pomocą można pokazywać lub ukrywać elementy. Jak działa ta dyrektywa: jako parametr przyjmuje dowolną właściwość obiektu data. Jeśli ta właściwość ma wartość true - to element będzie wyświetlony, a jeśli false - to ukryty.

Spójrzmy na przykład. Załóżmy, że mamy akapit z atrybutem v-if. Wartością tego atrybutu niech będzie właściwość visible, o tak:

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

Ustawmy wartość naszej właściwości na true. W tym przypadku akapit będzie wyświetlony:

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

A jeśli ustawimy visible na wartość false, to akapit będzie ukryty:

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