Vueда реактив шарт

Келинг, шарт реактив бўлишини таъминлаймиз. Мисол учун, тугмани босганда элемент бекинсини қилайлик. Бизда куйидаги абзац бор деб фараз қилайлик:

App.vue<template>
  <p v-if="visible">text</p>
</template>

Келинг, абзацимиз дарҳол кўриниб туришини таъминлаймиз:

javascriptdata() {
  return {
    visible: true,
  }
}

Энди босилганда абзац бекинадиган тугма ясаймиз:

App.vue<template>
  <button @click="hide">hide</button>
  <p v-if="visible">text</p>
</template>

Богланган метод visible хусусиятини false қилади, шу билан бизнинг абзацимиз бекинишга мажбур бўлади:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}
Задание 1

Абзац ва тугма берилган. Абзац дарҳол бекинган бўлсин. Абзацни кўрсатадиган тугма ясангиз.

Задание 2

Абзац ва иккита тугма берилган. Биринчи тугма абзацни кўрсатсин, иккинчиси эса уни бекинсин.

Задание 3

Олдинги вазифани шундай модификация қилингизки, экранда ҳар доим тугмаларнинг фақат биттаси кўриниб турсин: агар абзац кўрсатилган бўлса, уни бекиш учун тугма, агар бекинган бўлса, кўрсатиш учун тугма.