Reaktiivne tingimus Vues
Teeme nii, et tingimus oleks reaktiivne. Näiteks teeme nii, et element peidab vajutamise peale nupul. Olgu meil järgmine lõik:
<template>
<p v-if="visible">text</p>
</template>
Teeme nii, et meie lõik algselt oleks nähtav:
data() {
return {
visible: true,
}
}
Teeme nüüd nupu, mille vajutamise peale lõik peidetakse:
<template>
<button @click="hide">peida</button>
<p v-if="visible">text</p>
</template>
Seotud meetod muudab
omadust visible väärtusele false,
muutes sellega meie
lõigu peidetuks:
methods: {
hide: function() {
this.visible = false;
}
}
Antud on lõik ja nupp. Olgu lõik algselt peidetud. Tehke nupp, mis näitab lõiku.
Antud on lõik ja kaks nuppu. Olgu esimene nupp näitab lõiku, aga teine - peidab selle.
Modifitseerige eelmist ülesannet nii, et ekraanil oleks alati nähtav ainult üks nuppudest: kui lõik on nähtav, siis nupp peitmiseks, aga kui peidetud - siis nupp näitamiseks.
