Vue-dä reaksiýa şerti

Şertiň reaksiýaly bolmagyny edeliň. Mysal üçin, element-yuwas düwmesine basylanda ýaşyrylsyn. Bizde aşakdaky abzas bar bolsun:

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

Abzasy-myzyň başda görkezilýändigini edeliň:

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

Indi, basylýanda abzasyň ýaşyrylýan düwmesini edeliň:

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

Baglanyşykly usul visible aýratynlygyny false üýtgeder, şeýlelik bilen abzasy-myzy ýaşyrmaga mejbur eder:

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

Abzas we düwme berlen. Abzas başda ýaşyrylan bolsun. Abzasy görkezýän düwme ýasalyň.

Задание 2

Abzas we iki düwme berlen. Birinji düwme abzasy görkezsin, ikinjisi bolsa ony ýaşyrsyn.

Задание 3

Öňki meseläni üýtgediň, şeýlelik bilen ekranda hemişe diňe bir düwme görünsin: eger abzas görkezilýän bolsa, ýaşyrmak üçin düwme, ýöne ýaşyrylan bolsa, görkezmek üçin düwme görünsin.