Toggle di elementi in Vue

Ora creiamo un pulsante che attiverà/disattiverà un paragrafo, cioè al primo clic lo mostrerà, e al secondo clic lo nasconderà. Per fare ciò, al clic sul pulsante chiameremo il metodo toggle:

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

Nel codice del metodo, sarà necessario prendere il valore della proprietà visible e invertirlo nel suo opposto:

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