vue循环出来的这种结构如何控制显示隐藏

Z时代
2024-01-10
分类：技术分享

点击二级菜单如何控制三级菜单的显示隐藏

<template>
<div class="hello">
<ul>
<li v-for="(item,index) in options" :key="index">
<div class="a_menu">{{ item.label }}</div>
<div class="b_menu">
<span v-for="(i,index) in item.children" :key="index" @click="showCont(index)">{{ i.label }}
<div v-if="">
<div v-for="(x,index) in i.children" :key="index" class="c_menu">{{ x.label }}</div>
</div>
</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
thisIndex: -1,
options: [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
}, {
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}]
}]
}
},
methods: {
showCont (index) {
//   if (this.thisIndex === null) {
//     this.thisIndex = index
//   }else {
//     this.thisIndex = null
//   }
},
}
}
</script>
<style scoped>
ul {
margin-top: 30px;
padding-right: 40px;
}
li {
overflow: auto;
list-style: none;
margin-bottom: 20px;
line-height: 35px;
}
.a_menu {
float: left;
font-size: 18px;
font-weight: bold;
color: #507ab7;
width: 200px;
}
.b_menu {
float: left;
}
span {
display: inline-block;
margin: 0 30px 0 0;
color: #6c6c6c;
}
</style>