Vueda reaktiv sərt

Gəlin sərti reaktiv edək. Məsələn, elementi düyməni kliklədikdə gizlədək. Tutaq ki, bizdə aşağıdakı abzas var:

App.vue<template>
  <p v-if="visible">mətn</p>
</template>

Gəlin abzasımızın əvvəldən görünən olmasını təmin edək:

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

İndi isə kliklədikdə abzası gizlədəcək bir düymə edək:

App.vue<template>
  <button @click="hide">gizlət</button>
  <p v-if="visible">mətn</p>
</template>

Bağlanmış metod visible xassəsini false olaraq dəyişəcək, bununla da abzasımızın gizlənməsinə səbəb olacaq:

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

Bir abzas və bir düymə verilmişdir. Abzas əvvəldən gizli olsun. Abzası göstərəcək bir düymə edin.

Задание 2

Bir abzas və iki düymə verilmişdir. Birinci düymə abzası göstərsin, ikincisi isə onu gizlətsin.

Задание 3

Əvvəlki məsələni elə dəyişin ki, ekranda həmişə yalnız bir düymə görünsün: əgər abzas göstərilibsə, onda gizlətmə düyməsi, əgər gizlidirsə - onda göstərmə düyməsi.