vue通过v-for和v-if做菜单栏

首先是后台数据结构部分,做个数组,有二级的再加个数组,‘size’表示是否有二级,‘active’表示是否是激活状态

navs:[          //
    {'name':'nav1','size':false,'active':true,'href':'aa.php'},
    {'name':'nav2','size':true,'active':false,'innerNav':[
        {'name':'nav1-nav1','size':false,'active':false,'href':'aa.php'},
        {'name':'nav1-nav2','size':false,'active':false,'href':'aa.php'},
        {'name':'nav1-nav3','size':false,'active':false,'href':'aa.php'}
    ]},
    {'name':'nav3','size':false,'active':false,'href':'aa.php'},
    {'name':'na4','size':false,'active':false,'href':'aa.php'}
]

然后是前端调用

<ul class="nav" id="side-menu">
                <li v-for="item in database.navs"   :class="{ active: item.active }">
                    <a  :href=" item.href "  v-cloak>
                        {{item.name}}
                        <span class="fa fa-caret-left " v-if="item.size"></span>
                    </a>
                    <ul  class="nav nav-second-level"  v-if="item.size"  >
                        <li v-for="todo in item.innerNav" :class="{ active: todo.active }">
                            <a :href=" todo.href "  v-cloak >{{todo.name}}</a>
                        </li>
                    </ul>
                </li>
            </ul>

这样就实现了。

随机浏览