Εμφάνιση βάσει συνθήκης στο Vue

Η επόμενη directive που θα μελετήσουμε ονομάζεται v-if. Με τη βοήθειά της μπορούμε να εμφανίζουμε ή να κρύβουμε στοιχεία. Πώς λειτουργεί αυτή η directive: ως παράμετρο δέχεται οποιαδήποτε ιδιότητα του αντικειμένου data. Εάν αυτή η ιδιότητα έχει τιμή true - τότε το στοιχείο θα εμφανίζεται, ενώ εάν είναι false - τότε θα κρύβεται.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια παράγραφο με το χαρακτηριστικό v-if. Η τιμή αυτού του χαρακτηριστικού ας είναι η ιδιότητα visible, έτσι:

App.vue<template>
  <p v-if="visible">κείμενο</p>
</template>

Ας ορίσουμε την τιμή της ιδιότητάς μας σε true. Σε αυτή την περίπτωση η παράγραφος θα εμφανίζεται:

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

Ενώ αν το visible τεθεί σε τιμή false, τότε η παράγραφος θα κρύβεται:

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