arco Desgin vue中<a-button 动态更改禁用状态

在使用Ant Design Vue（arcoDesign Vue）时，<a-button> 组件提供了 `disabled` 属性，该属性可以用来控制按钮是否被禁用。要动态更改按钮的禁用状态，可以使用 Vue 的数据绑定和条件渲染功能。

以下是一个简单的示例，展示了如何根据组件的状态来动态更改按钮的禁用状态：

<template>
  <div>
    <!-- 绑定 disabled 属性到 Vue 实例的按钮状态上 -->
    <a-button :disabled="buttonDisabled">点击我</a-button>
    <!-- 切换按钮的禁用状态 -->
    <a-button @click="toggleButtonDisabled">切换禁用状态</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始按钮状态设为 false，即不禁用
      buttonDisabled: false,
    };
  },
  methods: {
    // 定义一个方法来切换按钮的禁用状态
    toggleButtonDisabled() {
      this.buttonDisabled = !this.buttonDisabled;
    },
  },
};
</script>

在这个例子中，我们定义了一个名为 `buttonDisabled` 的响应式数据属性，它用来控制按钮的禁用状态。当 `buttonDisabled` 的值为 `true` 时，按钮会被禁用；当值为 `false` 时，按钮则处于可用状态。同时，我们添加了一个点击事件处理器 `toggleButtonDisabled`，它会切换 `buttonDisabled` 的值，从而动态地启用或禁用按钮。