Ändra text vid toggling i Vue

Låt oss göra så att texten på knappen visar vilken åtgärd knappen kommer att utföra i nuläget när vi togglar. För att göra detta måste vi använda ternära operatorn på följande sätt:

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