Elementtien vaihtaminen Vue:ssa

Tehdään nappi, joka vaihtaa kappaleen, eli ensimmäisellä klikkauksella näyttää sen, ja toisella klikkauksella - piilottaa sen. Tätä varten klikkaamalla nappia kutsumme metodia toggle:

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

Metodikoodissa on otettava ominaisuuden visible arvo ja kääntää se sen vastakohdaksi:

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