vue动态生成li

<ul class="nav metismenu" id="side-menu">
						<li class="nav-header">
							<div class="dropdown profile-element">
								<img alt="image" class="rounded-circle" src="img/头像.jpg" style="width: 45px;height: 45;" />
								<a href="javascript:void(0);">
									<span class="block m-t-xs font-bold" v-if="loginuser">{{loginuser.loginName}}</span>
									<span class="text-muted text-xs block" v-if="loginuser">{{loginuser.roleName}}</span>
								</a>
							</div>
							<div class="logo-element">
								Share Sun
							</div>
						</li>
						<!-- <li>
							<a href="task.html">
								<i class="fa fa-diamond"></i>
								<span class="nav-label">我的工作台</span>
							</a>
						</li>
						<li>
							<a href="dealttask.html">
								<i class="fa fa-th-large"></i>
								<span class="nav-label">我的待办</span>
							</a>
						</li>
						<li>
							<a href="account.html">
								<i class="fa fa-envelope"></i>
								<span class="nav-label">我的账户</span>
							</a>
						</li>
						<li>
							<a href="taskstatistics.html">
								<i class="fa fa-pie-chart"></i>
								<span class="nav-label">待办统计</span> 
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa fa-sitemap"></i> 
								<span class="nav-label">系统管理</span><span class="fa arrow"></span>
							</a>
							<ul class="nav nav-second-level collapse">
								<li>
									<a href="userManager.html">用户管理</a>
								</li>
							</ul>
						</li> -->
						
						

					</ul>
$.ajax({
						url: this.projectName + '/menu/getMenuByLoginUser',
						type: 'get',
						dataType: 'json',
						success: function(result) {
							// console.log('当前菜单-----',result.data);
							var menulist=result.data;
							var list=$('#side-menu').html();
							menulist.forEach(function(val){  
								if(val.menuName=='用户管理'){
										list+='<li>'+
										'<a href="javascript:void(0);"><i class="fa fa-sitemap"></i><span class="nav-label">系统管理</span><span class="fa arrow"></span></a>'+
											'<ul class="nav nav-second-level collapse"><li><a href="'+val.menuUrl+'">'+val.menuName+'</a></li></ul>'+'</li>';
									}else{
										list+='<li><a href="'+val.menuUrl+'"><i class="fa fa-diamond"></i><span class="nav-label">'+val.menuName+'</span></a></li>';
									}
							});
							// for(var val of menulist){
							// 	console.log(val.menuName,val.menuUrl);
							// 	if(val.menuName=='用户管理'){
							// 		list+='<li>'+
							// 		'<a href="javascript:void(0);"><i class="fa fa-sitemap"></i><span class="nav-label">系统管理</span><span class="fa arrow"></span></a>'+
							// 			'<ul class="nav nav-second-level collapse"><li><a href="'+val.menuUrl+'">'+val.menuName+'</a></li></ul>'+'</li>';
							// 	}else{
							// 		list+='<li><a href="'+val.menuUrl+'"><i class="fa fa-diamond"></i><span class="nav-label">'+val.menuName+'</span></a></li>';
							// 	}
							// }
							 // console.log('here-----------',list);
							$('#side-menu').html(list);

						}

3
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值