Condizione Reattiva in Vue
Rendiamo la condizione reattiva. Ad esempio, facciamo in modo che l'elemento venga nascosto cliccando su un pulsante. Supponiamo di avere il seguente paragrafo:
<template>
<p v-if="visible">testo</p>
</template>
Facciamo in modo che il nostro paragrafo venga inizialmente visualizzato:
data() {
return {
visible: true,
}
}
Creiamo ora un pulsante che, quando cliccato, nasconderà il paragrafo:
<template>
<button @click="hide">nascondi</button>
<p v-if="visible">testo</p>
</template>
Il metodo associato cambierà
la proprietà visible in false,
facendo così scomparire il nostro
paragrafo:
methods: {
hide: function() {
this.visible = false;
}
}
Dato un paragrafo e un pulsante. Lascia che il paragrafo sia inizialmente nascosto. Crea un pulsante che mostrerà il paragrafo.
Dato un paragrafo e due pulsanti. Lascia che il primo pulsante mostri il paragrafo, e il secondo - lo nasconda.
Modifica il compito precedente in modo che sullo schermo sia sempre visibile solo uno dei pulsanti: se il paragrafo è mostrato, allora il pulsante per nasconderlo, e se è nascosto - allora il pulsante per mostrarlo.
