Vue-da Reaktiv Shart

Keling, shartni reaktiv qilaylik. Misol uchun, element tugma bosilganda yashirinsin. Quyidagi abzats bor deb faraz qilaylik:

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

Keling, abzatsimiz dastlab ko‘rinadigan holatda bo‘lsin:

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

Endi abzatsni yashirish uchun bosiladigan tugma yaratamiz:

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

Bog‘langan metod visible xususiyatini false qiymatiga o‘zgartiradi, shu bilan abzatsimizni yashirishga majbur qiladi:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}