基于数据在vuejs中动态交换按钮的方法

<template>
  <div>
    <!-- 根据currentButton的值动态显示按钮 -->
    <button v-if="currentButton === 'buttonA'" @click="swapButton">Button A</button>
    <button v-else-if="currentButton === 'buttonB'" @click="swapButton">Button B</button>
    <button v-else>Default Button</button>

    <!-- 显示当前按钮的状态 -->
    <p>Current Button: {{ currentButton }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义响应式数据
    const currentButton = ref('buttonA');

    // 定义方法来交换按钮
    function swapButton() {
      if (currentButton.value === 'buttonA') {
        currentButton.value = 'buttonB';
      } else if (currentButton.value === 'buttonB') {
        currentButton.value = 'default';
      } else {
        currentButton.value = 'buttonA';
      }
    }

    // 返回响应式数据和方法
    return {
      currentButton,
      swapButton
    };
  }
};
</script>