如何禁用Vue上的按钮？

<template>
  <button v-bind:disabled="isDisabled">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: true
    };
  }
};
</script>

<template>
  <button v-if="!isDisabled">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: true
    };
  }
};
</script>

<template>
  <button :class="{ 'disabled': isDisabled }">按钮</button>
</template>

<style>
.disabled {
  pointer-events: none;
  opacity: 0.6;
}
</style>

<script>
export default {
  data() {
    return {
      isDisabled: true
    };
  }
};
</script>