Αντικειμενική Προϋπόθεση στο Vue

Ας κάνουμε την προϋπόθεση αντικειμενική. Για παράδειγμα, ας κάνουμε ένα στοιχείο να κρύβεται με κλικ σε ένα κουμπί. Ας υποθέσουμε ότι έχουμε την ακόλουθη παράγραφο:

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

Ας κάνουμε την παράγραφό μας να εμφανίζεται αρχικά:

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

Ας φτιάξουμε τώρα ένα κουμπί, που upon clicking θα κρύβει την παράγραφο:

App.vue<template>
  <button @click="hide">κρύψε</button>
  <p v-if="visible">κείμενο</p>
</template>

Η δεσμευμένη μέθοδος θα αλλάζει την ιδιότητα visible σε false, εξαναγκάζοντας έτσι την παράγραφό μας να κρυφτεί:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}