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;
  }
}