Alternar elementos en Vue
Ahora hagamos un botón que
alterne un párrafo, es decir, que al primer
clic lo muestre y al segundo
clic lo oculte. Para ello, al hacer clic
en el botón llamaremos al método
toggle:
<template>
<button @click="toggle">toggle</button>
<p v-if="visible">text</p>
</template>
En el código del método será necesario tomar
el valor de la propiedad visible
e invertirlo a su
opuesto:
toggle: function() {
this.visible = !this.visible;
}
Se dan tres párrafos y tres botones. Haz que cada botón alterne su propio párrafo.