Vueでのトグル操作におけるテキスト切り替え

トグル操作の際に、ボタンにその時点で実行される操作名を表示するようにしてみましょう。 そのためには、以下のように三項演算子を使用する必要があります。

html<template>
  <button @click="toggle">
    {{ visible ? 'hide' : 'show' }}
  </button>
</template>