Reaktivt villkor i Vue
Låt oss göra så att villkoret blir reaktivt. Till exempel, låt oss göra så att ett element döljs vid ett klick på en knapp. Låt oss säga att vi har följande stycke:
<template>
<p v-if="visible">text</p>
</template>
Låt oss göra så att vårt stycke initialt är synligt:
data() {
return {
visible: true,
}
}
Låt oss nu skapa en knapp som, när man klickar på den, kommer att dölja stycket:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Den bundna metoden kommer att ändra
egenskapen visible till false,
vilket får vårt
stycke att döljas:
methods: {
hide: function() {
this.visible = false;
}
}
Det finns ett stycke och en knapp. Låt stycket vara dolt initialt. Skapa en knapp som kommer att visa stycket.
Det finns ett stycke och två knappar. Låt den första knappen visa stycket, och den andra - dölja det.
Modifiera den föregående uppgiften så att endast en av knapparna alltid är synlig på skärmen: om stycket är visat, så är knappen för att dölja synlig, och om det är dolt - så är knappen för att visa synlig.
