Reaktiivinen ehto Vue:ssa

Tehdään ehdosta reaktiivinen. Esimerkiksi tehdään niin, että elementti piilotetaan napin painalluksesta. Oletetaan, että meillä on seuraava kappale:

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

Tehdään niin, että kappaleemme on aluksi näkyvissä:

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

Tehdään nyt painike, jota painamalla kappale piilotetaan:

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

Sidottu metodi muuttaa ominaisuuden visible arvoksi false, saaden näin meidän kappaleemme piilotumaan:

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