Vue.js菜单三级以至于多级联动

公司项目使用Vue.js 前端初学Vue.js 然后给我的静态页面刚开始都能点的动

但是接入接口进行数据绑定之后就点不动了一番了解之后才知道是他绑定的是Jquery的click事件

在Vue中会因为渲染问题导致失效常见的解决方法通过setTimeout来但这很不Vue

于是

首先定义三个变量

openOLM:0,
openTLM:0,
openSLM:0,

分别是一级二级三级菜单的索引

然后分别

:style="{display:(m1_Index==openOLM)?'':'none'}"

:style="{display:(m2_Index==openTLM)?'':'none'}"

:style="{display:(m3_Index==openSLM)?'':'none'}"

这是加在菜单对应的Html标签上控制菜单的显示

然后分别加上点击事件

@click="openOLM=(m1_Index==openOLM?null:m1_Index),openTLM=null,openSLM=null"

@click="openTLM=(m2_Index==openTLM?null:m2_Index)

@click="openSLM=(openSLM==m3_Index?null:m3_Index)

这样就通过索引控制菜单的显示以及打开然后通过点击菜单修改索引修改菜单的展开与否

Vue.js菜单三级以至于多级联动

写不下去了

有什么问题直接联系q 451922429吧