Vueда реактив шарт
Келинг, шарт реактив бўлишини таъминлаймиз. Мисол учун, тугмани босганда элемент бекинсини қилайлик. Бизда куйидаги абзац бор деб фараз қилайлик:
<template>
<p v-if="visible">text</p>
</template>
Келинг, абзацимиз дарҳол кўриниб туришини таъминлаймиз:
data() {
return {
visible: true,
}
}
Энди босилганда абзац бекинадиган тугма ясаймиз:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Богланган метод visible хусусиятини
false қилади, шу билан бизнинг
абзацимиз бекинишга мажбур бўлади:
methods: {
hide: function() {
this.visible = false;
}
}
Абзац ва тугма берилган. Абзац дарҳол бекинган бўлсин. Абзацни кўрсатадиган тугма ясангиз.
Абзац ва иккита тугма берилган. Биринчи тугма абзацни кўрсатсин, иккинчиси эса уни бекинсин.
Олдинги вазифани шундай модификация қилингизки, экранда ҳар доим тугмаларнинг фақат биттаси кўриниб турсин: агар абзац кўрсатилган бўлса, уни бекиш учун тугма, агар бекинган бўлса, кўрсатиш учун тугма.
