Reaktive Bedingung in Vue

Lassen Sie uns die Bedingung reaktiv gestalten. Lassen Sie uns zum Beispiel das Element beim Klicken auf einen Button ausblenden. Nehmen wir an, wir haben den folgenden Absatz:

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

Lassen Sie uns unseren Absatz zunächst anzeigen:

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

Erstellen wir nun einen Button, bei dessen Klick der Absatz ausgeblendet wird:

App.vue<template>
  <button @click="hide">hide</button>
  <p v-if="visible">text</p>
</template>

Die gebundene Methode wird die Eigenschaft visible auf false setzen, was dazu führt, dass unser Absatz ausgeblendet wird:

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