用vue来写 <a-sub-menu> <a-menu-item> </a-menu-item> </a-sub-menu> 都进行遍历并显示例子

好的，下面是示例代码：

<template>
  <div>
    <div v-for="menu_item in main_menu" :key="menu_item">
      <template v-if="menu_item.sub_menu">
        <a-sub-menu :key="menu_item.text">
          <span slot="title">{{ menu_item.text }}</span>
          <a-menu-item v-for="sub_menu_item in menu_item.sub_menu" :key="sub_menu_item">
            {{ sub_menu_item.text }}
          </a-menu-item>
        </a-sub-menu>
      </template>
      <template v-else>
        <a-menu-item :key="menu_item.text">{{ menu_item.text }}</a-menu-item>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      main_menu: [
        {
          text: "菜单项1"
        },
        {
          text: "子菜单1",
          sub_menu: [
            {
              text: "子菜单项1"
            },
            {
              text: "子菜单项2"
            }
          ]
        },
        {
          text: "菜单项2"
        }
      ]
    };
  }
};
</script>

使用`v-for`指令遍历主菜单，并判断是否存在子菜单，如果存在则使用`<a-sub-menu>`和`<a-menu-item>`组件来显示子菜单，否则只使用`<a-menu-item>`组件来显示菜单项。注意使用`:key`来为循环的元素指定唯一的键值。