Vueでの要素のトグル

次に、段落をトグルするボタンを作ってみましょう。つまり、最初のクリックで表示し、2回目のクリックで非表示にします。これを行うには、ボタンをクリックしたときに toggle メソッドを呼び出します：

App.vue<template>
  <button @click="toggle">toggle</button>
  <p v-if="visible">text</p>
</template>

メソッドのコードでは、プロパティ visible の値を取得し、その反対の値に反転させる必要があります：

javascripttoggle: function() {
  this.visible = !this.visible;
}