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