Εναλλαγή στοιχείων στο Vue

Ας δημιουργήσουμε τώρα ένα κουμπί που θα εναλλάσσει μια παράγραφο, δηλαδή στο πρώτο κλικ θα την εμφανίζει, και στο δεύτερο κλικ - θα την κρύβει. Για να το κάνουμε αυτό, upon click στο κουμπί θα καλούμε τη μέθοδο toggle:

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

Στον κώδικα της μεθόδου θα πρέπει να πάρουμε την τιμή της ιδιότητας visible και να την αντιστρέψουμε στην αντίθετη τιμή της:

javascripttoggle: function() {
  this.visible = !this.visible;
}