vue.js v-for嵌套 + v-if

最新推荐文章于 2024-09-17 10:49:57 发布

北山_

最新推荐文章于 2024-09-17 10:49:57 发布

阅读量4.3k

点赞数

分类专栏： vue 文章标签： vue.js v-for v-if layui

本文链接：https://blog.csdn.net/qq_32196629/article/details/103497432

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在开发权限控制过程中，需求嵌套多层 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
    }
  })
});

效果图如下：