რეაქტიული პირობა Vue-ში

მოდით, გავაკეთოთ ისე, რომ პირობა იყოს რეაქტიული. მაგალითად, გავაკეთოთ ისე, რომ ელემენტი დამალული იყოს ღილაკზე დაჭერისას. მოდით, გვქონდეს შემდეგი აბზაცი:

App.vue<template>
  <p v-if="visible">ტექსტი</p>
</template>

მოდით, გავაკეთოთ ისე, რომ ჩვენი აბზაცი თავიდან იყოს ნაჩვენები:

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

მოდით, ახლა გავაკეთოთ ღილაკი, რომლის დაჭერისას აბზაცი დაიმალება:

App.vue<template>
  <button @click="hide">დამალვა</button>
  <p v-if="visible">ტექსტი</p>
</template>

მიბმული მეთოდი შეცვლის თვისებას visible false-მდე, რითაც აიძულებს ჩვენს აბზაცს დაიმალოს:

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