上面代码用组合式怎么写

使用组合式 API 来编写上面的代码，可以按照以下方式进行：

<template>
  <div>
    <van-steps direction="vertical" :active="activeIndex">
      <van-step>
        <h3>【城市】物流状态1</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>【城市】物流状态2</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>快件已发货</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
    </van-steps>

    <button @click="updateActiveIndex">增加 activeIndex</button>
  </div>
</template>

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

export default {
  setup() {
    const activeIndex = ref(0);

    const updateActiveIndex = () => {
      activeIndex.value += 1;
    };

    return {
      activeIndex,
      updateActiveIndex
    };
  }
};
</script>

在上面的代码中，我们使用 `ref` 函数来创建 `activeIndex` 的响应式引用。然后，我们在 `setup` 函数中返回 `activeIndex` 和 `updateActiveIndex` 函数。通过这种方式，您可以在组合式 API 中访问和修改 `activeIndex` 的值。点击按钮时，会调用 `updateActiveIndex` 函数来增加 `activeIndex` 的值，实现步骤的切换效果。