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

在Vue.js中，动态交换按钮通常涉及到组件的状态管理和响应式数据更新。以下是基于Vue 3语法的示例，展示如何根据数据动态改变按钮的显示内容或行为。

基础概念

响应式数据：Vue.js使用响应式系统来跟踪数据的变化。当数据变化时，视图会自动更新。
计算属性：用于基于现有响应式数据派生出新数据。
方法：用于执行某些操作，可以改变组件的状态。

示例代码

<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>