用Vuejs在循环生成的菜单中打开一个UL @click

在Vue.js中，可以使用v-for指令循环生成菜单，并使用@click事件打开一个<ul>元素。下面是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in menu" :key="index" @click="openSubMenu(index)">
        {{ item.name }}
        <ul v-if="item.subMenuVisible">
          <li v-for="(subItem, subIndex) in item.subMenu" :key="subIndex">
            {{ subItem.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: '菜单1',
          subMenu: [
            { name: '子菜单1' },
            { name: '子菜单2' },
          ],
          subMenuVisible: false,
        },
        {
          name: '菜单2',
          subMenu: [
            { name: '子菜单3' },
            { name: '子菜单4' },
          ],
          subMenuVisible: false,
        },
      ],
    };
  },
  methods: {
    openSubMenu(index) {
      // 切换子菜单的显示状态
      this.menu[index].subMenuVisible = !this.menu[index].subMenuVisible;
    },
  },
};
</script>

在上面的示例中，使用v-for指令循环生成了菜单的列表项。每个列表项都绑定了@click事件，当点击时会调用openSubMenu方法来切换对应子菜单的显示状态。子菜单的显示状态由subMenuVisible属性控制，初始时都为false。在子菜单项中使用v-if指令来根据subMenuVisible属性的值决定是否显示子菜单。

当点击菜单项时，对应的子菜单的subMenuVisible属性会被切换为相反的值，从而实现打开/关闭子菜单的效果。