場景：二級選單用html寫死的，而不是以通過data和v-for動態生成的

今天在實現的過程中，出現了問題。實現思路如下： data中設定menuIsShow為一個數組，陣列的元素為boolean值，表示一級選單是否顯示或隱藏。 在html中對應的二級選單元素上繫結menuIsShow的值，如:class="{showItem:menuIsShow[0]}"，然後在對應的一級選單元素上繫結事件改變menuIsShow的值，即@click="menuIsShow[0] = !menuIsShow[0]"

在瀏覽器中，點選一級選單，無報錯，對應的二級選單也沒展開，但是通過vue Devtools觀察到，每點選一次一級選單，對應的menuIsShow

於是，得出結論，頁面中繫結的陣列發生變化後，頁面需要重新整理元件才能觀察到陣列的值發生變化。 vue小白暫時不知道這是為什麼，但是感覺使用物件就可以解決這個問題，果然實現了。以下是實現的程式碼：

//一級選單
<a  @click="menuIsShow.menuOne = !menuIsShow.menuOne"><span>系統管理</span></a>
//二級選單
<dl class="layui-nav-child"  :class="{layui_nav_itemed: menuIsShow.menuOne}">
      <dd>
            <router-link to="/menuManage">選單管理</router-link>
      </dd>
      <dd>
            <router-link to="/userManage">使用者管理</router-link>
       </dd>
       <dd>
            <router-link to="/roleManage">角色管理</router-link>
       </dd>
 </dl>
 //一級選單
 <a @click="menuIsShow.menuTwo = !menuIsShow.menuTwo"><span>系統監控</span></a>
 //二級選單
<dl class="layui-nav-child" :class="{layui_nav_itemed: menuIsShow.menuTwo}">
   <dd>
       <a ><span>系統日誌</span></a>
   </dd>
   <dd>
        <a ><span>介面api</span></a>
   </dd>
   <dd>
        <a ><span>系統監控</span></a>
   </dd>
   <dd>
        <a ><span>定時任務</span></a>
    </dd>
</dl>
 

data(){
    return {
      subMenuIndex:'',
      menuIsShow:{menuOne:false,menuTwo:false}
    }
  }