<ul class="panel">
    <li class="action_list action_expanded">
        <MenuStatus/>
    </li>
    <li class="action_list"
        :class="{'action_expanded': 1 == secActive}">
        <div class="toggle"
            @click.prevent.stop="toggleSecMenu(1, $event)">
            <span class="action_name">Apparent Horizon</span>
        </div>
        <MenuApparentHorizon/>
    </li>
    <li class="action_list"
        :class="{'action_expanded': 2 == secActive}">
        <div class="toggle"
            @click.prevent.stop="toggleSecMenu(2, $event)">
            <span class="action_name">Material</span>
        </div>
        <MenuMaterial/>
    </li>
    <li class="action_list"
        :class="{'action_expanded': 3 == secActive}">
        <div class="toggle"
            @click.prevent.stop="toggleSecMenu(3, $event)">
            <span class="action_name">Camera</span>
        </div>
        <MenuPerspective/>
    </li>
</ul>

如上代碼， 重復(fù)性很高，請(qǐng)問該怎么優(yōu)化呢？

最開始寫的

<template v-for="(item, index) in items">
  <li class="action_list"
      :class="{'action_expanded': index == secActive || !item.text}"
      v-if="item.template">
      <div v-if="item.text" class="toggle"
          @click.prevent.stop="toggleSecMenu(index, $event)">
          <span class="action_name">{{ item.text }}</span>
      </div>
      <component @closeMenu="closeMenu" :is="item.template"></component>
  </li>
  <li class="action_list" v-else @click.prevent.stop="item.action">{{ item.text }}</li>
</template>


items: [
    {
        template: MenuStatus
    },
    {
        text: "Apparent Horizon",
        template: MenuApparentHorizon
    },
    {
        text: "Material",
        template: MenuMaterial
    },
    {
        text: "Camera",
        template: MenuPerspective
    }
]

感覺太復(fù)雜了，不利于后續(xù)修改