Kushti Reaktiv në Vue
Le ta bëjmë në mënyrë që kushti të jetë reaktiv. Për shembull, le ta bëjmë në mënyrë që elementi të fshihet duke klikuar në një buton. Le të themi se kemi paragrafin në vijim:
<template>
<p v-if="visible">text</p>
</template>
Le ta bëjmë në mënyrë që paragrafi ynë të shfaqet fillimisht:
data() {
return {
visible: true,
}
}
Tani le të bëjmë një buton, duke klikuar në të cilin paragrafi do të fshihet:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Metoda e lidhur do të ndryshojë
vetinë visible në false,
duke e bërë kështu
paragrafin tonë të fshihet:
methods: {
hide: function() {
this.visible = false;
}
}
Jepet një paragraf dhe një buton. Le të themi se paragrafi është i fshehur fillimisht. Bëni një buton, që do ta shfaqë paragrafin.
Jepen një paragraf dhe dy butona. Le të themi se butoni i parë e shfaq paragrafin, ndërsa i dyti - e fsheh atë.
Modifikoni detyrën e mëparshme në mënyrë që në ekran të jetë e dukshme gjithmonë vetëm një nga butonat: nëse paragrafi është i shfaqur, atëherë butoni për të fshehur, dhe nëse është i fshehur - atëherë butoni për të shfaqur.
