如何在vuejs中切换按钮

<template>
  <div>
    <button v-if="isButtonOn" @click="toggleButton">按钮1</button>
    <button v-else @click="toggleButton">按钮2</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonOn: true
    };
  },
  methods: {
    toggleButton() {
      this.isButtonOn = !this.isButtonOn;
    }
  }
};
</script>

<template>
  <div>
    <button @click="toggleButton">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isButtonOn: true
    };
  },
  methods: {
    toggleButton() {
      this.isButtonOn = !this.isButtonOn;
    }
  },
  computed: {
    buttonText() {
      return this.isButtonOn ? "按钮1" : "按钮2";
    }
  }
};
</script>