Reaktivni uslov u Vue
Hajde da učinimo da uslov bude reaktivan. Na primer, napravimo tako da se element sakrije klikom na dugme. Pretpostavimo da imamo sledeći paragraf:
<template>
<p v-if="visible">text</p>
</template>
Učinimo da naš paragraf inicijalno bude prikazan:
data() {
return {
visible: true,
}
}
Sada napravimo dugme, čijim klikom će se paragraf sakriti:
<template>
<button @click="hide">sakrij</button>
<p v-if="visible">text</p>
</template>
Povezana metoda će promeniti
svojstvo visible u false,
čime će naš paragraf biti sakriven:
methods: {
hide: function() {
this.visible = false;
}
}
Dat je paragraf i dugme. Neka paragraf bude inicijalno sakriven. Napravite dugme koje će prikazati paragraf.
Dat je paragraf i dva dugmeta. Neka prvo dugme prikazuje paragraf, a drugo - sakriva ga.
Modifikujte prethodni zadatak tako da na ekranu uvek bude vidljivo samo jedno od dugmića: ako je paragraf prikazan, onda dugme za sakrivanje, a ako je sakriven - onda dugme za prikazivanje.