在开发权限控制过程中，需求嵌套多层 v-for ，并且需要 v-if 判断是否需要显示标签（前端使用layui），直接代码如下：

html代码：

<ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="layadmin-system-side-menu">
  <li data-name="home" class="layui-nav-item layui-nav-itemed">
    <div v-for="parentMenu in parentMenus" >
      <a href="javascript:;" lay-tips="主页" lay-direction="2">
        <i class="layui-icon layui-icon-home"></i>
        <cite>{{ parentMenu.menu_name }}</cite>
      </a>
      <dl v-for="childMenu in childMenus" style="padding: 0px !important;" class="layui-nav-child">
        <dd v-if="childMenu.parent_id == parentMenu.menu_id" data-name="console"  >
          <a lay-href="home/">{{ childMenu.menu_name }}</a>
        </dd>
      </dl>
    </div>
  </li>
</ul>

js代码：

$.get("/index/menus", function(data, status){
    var vm = new Vue({
    el: '#app-4',
    data: {
      parentMenus: data.data.parentMenus,
      childMenus: data.data.childMenus
    }
  })
});

效果图如下：