<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div class="navDiv">
<ul>
<li v-for="(fir_nav, fir_index) in fir_level_nav">
<h3 v-on:click="show_sec_nav(fir_index)">{{ fir_nav }}</h3>
<ul>
<li v-for="(sec_nav, sec_index) in sec_level_nav[fir_index]" v-show="sec_navShow[fir_index]">
<h4 v-on:click="show_thr_nav(fir_index*3+sec_index)">{{sec_nav}}</h4>
<ul>
<li v-for="(thr_nav, thr_index) in thr_level_nav[fir_index*3+sec_index]" v-show="thr_navShow[fir_index*3+sec_index]">
<h5>{{thr_nav}}</h5>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p v-show="secHide">{{sec_navShow}}</p>
<p v-show="thrHide">{{thr_navShow}}</p>
<input type="text" v-model="sec_navShow[1]">
</div>
<script type="text/javascript">
var navData = [{
一级菜单1: [{
二级菜单1_1: ['三级菜单1_1_1', '三级菜单1_1_2', '三级菜单1_1_3', '三级菜单1_1_4']
},{
二级菜单1_2: ['三级菜单1_2_1', '三级菜单1_2_2', '三级菜单1_2_3']
},{
二级菜单1_3: ['三级菜单1_3_1', '三级菜单1_3_2']
},]
}, {
一级菜单2: [{
二级菜单2_1: ['三级菜单2_1_1', '三级菜单2_1_2']
},{
二级菜单2_2: ['三级菜单2_2_1', '三级菜单2_2_2']
},{
二级菜单2_3: ['三级菜单2_3_1', '三级菜单2_3_2', '三级菜单2_3_3']
},]
}, {
一级菜单3: [{
二级菜单3_1: ['三级菜单3_1_1', '三级菜单3_1_2', '三级菜单3_1_3', '三级菜单3_1_4']
},{
二级菜单3_2: ['三级菜单3_2_1', '三级菜单3_2_2']
},{
二级菜单3_3: ['三级菜单3_3_1', '三级菜单3_3_2', '三级菜单3_3_3']
},]
}, {
一级菜单4: [{
二级菜单4_1: ['三级菜单4_1_1', '三级菜单4_1_2', '三级菜单4_1_3']
},{
二级菜单4_2: ['三级菜单4_2_1', '三级菜单4_2_2', '三级菜单4_2_3', '三级菜单4_2_4']
},{
二级菜单4_3: ['三级菜单4_3_1', '三级菜单4_3_2']
},]
}];
function getNavList(arr) {
var nav = []
for (var s = 0; s < arr.length; s++) {
for (var key in arr[s]) {
if (arr[s].hasOwnProperty(key)) {
nav.push(key)
}
}
}
return nav
}
var navDiv = new Vue({
el: '.navDiv',
data: {
navDataDemo: navData,
sec_navList: [],
thr_navList: [],
sec_nav_show: [],
thr_nav_show: [],
secHide: true,
thrHide: true
},
methods: {
show_sec_nav: function (index) {
for (var i = 0; i < this.sec_navShow.length; i++) {
this.sec_navShow[i] = false
}
this.sec_navShow[index] = !this.sec_navShow[index]
this.secHide = !this.secHide
},
show_thr_nav: function (index) {
for (var i = 0; i < this.thr_navShow.length; i++) {
this.thr_navShow[i] = false
}
this.thr_navShow[index] = !this.thr_navShow[index]
this.thrHide = !this.thrHide
}
},
computed: {
fir_level_nav: function () {
var nav = []
for (var i = 0; i < this.navDataDemo.length; i++) {
for (var key in this.navDataDemo[i]) {
if (this.navDataDemo[i].hasOwnProperty(key)) {
nav.push(key)
}
}
}
return nav
},
sec_level_nav: function () {
for (var i = 0; i < this.navDataDemo.length; i++) {
var navName = getNavList(this.navDataDemo[i][this.fir_level_nav[i]])
this.sec_navList.push(navName)
}
return this.sec_navList
},
thr_level_nav: function () {
for (var i = 0; i < this.navDataDemo.length; i++) {
for (var s = 0; s < this.navDataDemo[i][this.fir_level_nav[i]].length; s++) {
for (var key in this.navDataDemo[i][this.fir_level_nav[i]][s]) {
if (this.navDataDemo[i][this.fir_level_nav[i]][s].hasOwnProperty(key)) {
this.thr_navList.push(this.navDataDemo[i][this.fir_level_nav[i]][s][key])
}
}
}
}
return this.thr_navList
},
sec_navShow: function () {
for (var i = 0; i < this.sec_level_nav.length; i++) {
this.sec_nav_show.push(false)
}
return this.sec_nav_show
},
thr_navShow: function () {
for (var i = 0; i < this.thr_level_nav.length; i++) {
this.thr_nav_show.push(false)
}
return this.thr_nav_show
}
}
})
</script>
</body>
</html>
4148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
