ul 两级联动

两级联动

演示:

 

 

 

原理:

将数据库中的数据封装成对象,然后将对象转化为json数据,在客户端用异步获取后台的json数据即可。

客户端jsp页面:

 

 

 

后台:

 

 

 

注意:在js中如果某个元素还未被加载,那么只可以获得该元素的引用,不能对该元素进行绑定事件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue侧边栏二级联动菜单的实现可以通过以下步骤来完成: 1. 首先,我们需要在Vue的组件中引入侧边栏的数据。可以通过在data属性中定义一个菜单数组来存储侧边栏的数据。例如: ``` data() { return { menuList: [ { label: '一级菜单1', children: [ { label: '二级菜单1-1', link: '/menu1-1' }, { label: '二级菜单1-2', link: '/menu1-2' } ] }, { label: '一级菜单2', children: [ { label: '二级菜单2-1', link: '/menu2-1' }, { label: '二级菜单2-2', link: '/menu2-2' } ] } ] } } ``` 2. 接下来,在页面中使用v-for指令来循环渲染一级菜单项。例如: ``` <ul> <li v-for="menu in menuList" :key="menu.label"> {{ menu.label }} </li> </ul> ``` 3. 在一级菜单项上绑定点击事件,以展示或者隐藏对应的二级菜单。可以通过设置一个`showChildren`属性来控制二级菜单的显示与隐藏。例如: ``` <li v-for="menu in menuList" :key="menu.label" @click="menu.showChildren = !menu.showChildren"> {{ menu.label }} <ul v-if="menu.showChildren"> <li v-for="child in menu.children" :key="child.label"> {{ child.label }} </li> </ul> </li> ``` 4. 最后,为二级菜单项绑定点击事件,以实现菜单项的跳转。可以通过`router-link`组件来实现路由跳转。例如: ``` <li v-for="child in menu.children" :key="child.label"> <router-link :to="child.link">{{ child.label }}</router-link> </li> ``` 通过以上步骤,我们可以实现一个基本的Vue侧边栏二级联动菜单。当点击一级菜单项时,对应的二级菜单会展示或隐藏,并且点击二级菜单项时可以实现对应的页面跳转。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值