vue动态创建三级导航

用vue动态创建了一个三级导航，直接上代码，可直接复制代码

<style>.nav_list {width: 200px;border-bottom: 1px solid #2C3E50;background: #42B983;text-align: left;font-size: 14px;color: #fff;}.nav_list_con {width: 100%;height: 35px;line-height: 35px;padding-left: 20px;}.nav_child,..nav_c_r_list {display: block;height: 30px;text-align: left;line-height: 30px;background: #2C3E50;color: #fff;padding-left: 40px;border-bottom: #D3DCE6;}.nav_child_con {background: #2B3245;}.nav_child_con,.nav_child_r {height: auto;width: 100%;display: none;}.nav_child P {margin: 0;padding: 0;height: 30px;line-height: 30px;padding-left: 40px;border-bottom: 1px solid #efefef;}.r_sp {display: block;height: 30px;line-height: 30px;padding-left: 50px;}.nav_c_r_list {background: salmon;}.nav_active {display: block !important;}
</style>
<template><div class="nav_con"><!-- 一级导航 --><div class="nav_list" v-for="(items,index) in  nav_data"><div class="nav_list_con" @click="nav_ck(index)">{{items.name}}</div><!-- 二级导航 --><div class="nav_child_con " :class="{nav_active:nav_index==index}"><span class="nav_child" v-for="(itema,indexs) in items.children"><!-- 判断没有三级导航的时候 --><p @click="nav_r_ck(indexs)" v-if="itema.name==undefined"> {{itema}}</p><p @click="nav_r_ck(indexs)" v-else=""> {{itema.name}}</p><!-- 三级导航 --><div class="nav_child_r" v-if="itema.name!=undefined" :class="{nav_active:nav_r_index==indexs}"><span class="nav_c_r_list r_sp" v-for="itemf in itema.childrens">{{itemf}}</span></div></span></div></div></div>
</template><script>export default ({data() {return {nav_data: [{name: '首页',children: [{name: '网站导航',childrens: ['三级导航一', '三级导航二', '三级导航三']},{name: '企业简介',childrens: ['文化内容', '企业内容', '企业愿景']},{name: '企业文化',childrens: ['公司业务', '公司领导', '公司文化']}],},{name: '一号机房',children: [{name: '机房温度配电',childrens: ['配电一', '配电二', '配电三']},{name: '共公空调管控',childrens: ['厕所空调管控', '厨房空调管控', '楼梯空调管控']},{name: '共公照明管控',childrens: ['厕所共公照明', '厨房共公照明', '楼梯共公照明']}],},{name: '二号机房',children: [{name: '办公用电',childrens: ['一楼', '二楼', '三楼']},{name: '办公空调',childrens: ['一楼空调管控', '二楼空调管控', '三楼空调管控']},{name: '办公照明',childrens: ['一楼照明', '二楼共公照明', '三楼共公照明']}],},{name: '生活区',children: ['宿舍照明', '宿舍空调', '宿舍公共']},{name: '恋爱区',children: ['浪漫树配电', '跑马灯用电', '娱乐用电']},],nav_index: 0,nav_r_index: 0,nav_is: false}},methods: {nav_ck: function(index) {this.nav_index = index;this.nav_r_index = 0},nav_r_ck: function(indexs) {console.log(indexs)this.nav_r_index = indexs}}})
</script>

最终效果

vue动态创建三级导航相关推荐

vue动态面包屑导航的使用
动态面包屑导航是根据路由中的 matched 获取到的单独提取出面包屑导航栏组件 <template><el-breadcrumb class="app-breadcru ...
vue动态面包屑导航
说明:根据不同的页面动态生成不同的面包屑导航 (不用在每个页面写死面包屑) router.js路由文件: {path:'/index',name:'index',component:()=>im ...
Vue 动态创建实例
在 Vue 里面,如果你想在页面里弹出一个东西,通常的办法是: 事先把要弹出的东西写在页面里,用 visible: false 把它隐藏起来控制 visible 使其显示或再次隐藏另外一种就是上面 ...
Vue开发实例（12）之实现动态左侧菜单导航
作者简介作者名:编程界明世隐简介:CSDN博客专家,从事软件开发多年,精通Java.JavaScript,博主也是从零开始一步步把学习成长.深知学习和积累的重要性,喜欢跟广大ADC一起打野升级,欢 ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
vue项目中动态创建模块以满足客户定制化需求的解决方案
前端项目中很多时候会遇到这样的业务需求: 所有的客户都有共同的一些业务需求,即基础需求基础需求需要根据业务发展进行升级在共同需求的基础上,每个客户又有不同的需求(客制化) 如果只是一两个客户还好, ...
elementUI使用v-for创建无限级导航栏—— 递归组件
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. elementUI使 ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...

vue动态创建三级导航

vue动态创建三级导航相关推荐

最新文章

热门文章