Reaktivni pogoj v Vue
Naredimo tako, da je pogoj reaktiven. Na primer, naredimo tako, da se element skrije ob kliku na gumb. Naj imamo naslednji odstavek:
<template>
<p v-if="visible">text</p>
</template>
Naredimo tako, da je naš odstavek sprva prikazan:
data() {
return {
visible: true,
}
}
Naredimo zdaj gumb, ob kliku na katerega se bo odstavek skril:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Povezana metoda bo spremenila
lastnost visible v false,
s čimer se bo naš
odstavek skril:
methods: {
hide: function() {
this.visible = false;
}
}
Podan je odstavek in gumb. Naj bo odstavek sprva skrit. Naredite gumb, ki bo prikazal odstavek.
Podan je odstavek in dva gumba. Naj prvi gumb prikaže odstavek, drugi pa ga skrije.
Spremenite prejšnjo nalogo tako, da je na zaslonu vedno viden le en gumb: če je odstavek prikazan, potem gumb za skrivanje, če je skrit, pa gumb za prikaz.
