Condición Reactiva en Vue
Hagamos que la condición sea reactiva. Por ejemplo, hagamos que el elemento se oculte al hacer clic en un botón. Supongamos que tenemos el siguiente párrafo:
<template>
<p v-if="visible">texto</p>
</template>
Hagamos que nuestro párrafo se muestre inicialmente:
data() {
return {
visible: true,
}
}
Ahora creemos un botón que, al hacer clic, ocultará el párrafo:
<template>
<button @click="hide">ocultar</button>
<p v-if="visible">texto</p>
</template>
El método vinculado cambiará
la propiedad visible a false,
haciendo así que nuestro
párrafo se oculte:
methods: {
hide: function() {
this.visible = false;
}
}
Dado un párrafo y un botón. Supongamos que el párrafo está inicialmente oculto. Crea un botón que muestre el párrafo.
Dado un párrafo y dos botones. Supongamos que el primer botón muestra el párrafo, y el segundo lo oculta.
Modifica la tarea anterior para que siempre solo se vea un botón en pantalla: si el párrafo se muestra, entonces el botón para ocultarlo, y si está oculto, entonces el botón para mostrarlo.
