a-collapse的change事件，监听active属性，属性为True则加载内容

可以通过添加 `change` 事件监听器来监听 a-collapse 折叠面板状态的变化，例如下面的示例代码：

<div a-collapse @change="handleCollapseChange">
  <h3 a-collapse-header>面板标题</h3>
  <div a-collapse-body :active="isActive">
    面板内容
  </div>
</div>

在此示例中，`@change` 属性指定 `handleCollapseChange` 方法为 a-collapse 折叠面板的状态变化事件监听器。`isActive` 是一个布尔值属性，表示折叠面板是否处于展开状态。

当用户单击面板标题时，`handleCollapseChange` 方法会被执行。在该方法中，可以通过获取 `isActive` 属性的值来判断面板当前是否处于展开状态，如果是则加载面板内容，否则不加载。

以下是一个示例 `handleCollapseChange` 方法的代码：

methods: {
  handleCollapseChange(active) {
    if (active) {
      // 如果面板处于展开状态，则加载面板内容
      this.loadPanelContent();
    }
  },
  loadPanelContent() {
    // 加载面板内容的代码
  }
}

在此示例中，`handleCollapseChange` 方法接受一个 `active` 参数，表示当前面板是否处于展开状态。如果 `active` 参数的值为 true，则调用 `loadPanelContent` 方法来加载面板内容。

注意，`a-collapse-body` 元素的 `:active` 属性绑定到 `isActive` 属性，这样可以在组件的 `data` 选项中定义 `isActive` 属性，来控制折叠面板的默认状态。例如：

data() {
  return {
    isActive: true
  }
}

在此示例中，`isActive` 属性被设置为 `true`，因此折叠面板默认为展开状态。