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:
<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:
toggle: function() {
this.visible = !this.visible;
}
Ci sono tre paragrafi e tre pulsanti. Fai in modo che ogni pulsante attivi/disattivi il proprio paragrafo.