Vue.js
使用vue实现侧导航问题
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
<template>
</template>
<script>
export default{
name:'left',
data(){
return {
switch:'',
items:[
{
name:'基础数据',
isSubShow:false,
subItems:[
{
name:'应用管理'
},
{
name:'模块管理'
},
{
name:'集群管理'
},
{
name:'应用程序管理'
}
]
},
{
name:'集群管理',
isSubShow:false,
subItems:[
{
name:'数据中心'
},
{
name:'服务单元'
},
{
name:'应用集群管理'
},
{
name:'应用节点管理'
},
{
name:'应用进程管理'
},
{
name:'IT资源管理'
}
]
}
]
}
},
methods:{
showToggle:function(item){
-
<template v-for="(item,index) in items" >
- {{item.name}} </template>
item.isSubShow=!item.isSubShow
}
}
} </script>
<style> .left{ width: 224px; height: 500px; } .leftMenu{ font-size: 20px; } .leftMenu li{ background-color: #4cae4c; } .leftMenu li i{ padding-left: 20px; } .leftMenu .subleftMenu{ padding-left: 42px; font-size: 18px; } .leftMenu .arrow{ padding-left: 60px; } </style>想实现一个二级导航，点击一个父导航后，显示该父导航下的子导航，再去点击另一个导航后，上一次点击的父导航下的子导航任然显示。想实现的效果是，点击相应的父导航，该父导航下的子导航显示，其他子导航不显示。现在实现的效果如为：
