<div class="box">
<el-menu
default-active="1"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#53a8ff"
text-color="#fff"
active-text-color="#ffd04b"
router="true"
>
<div v-for="(item,index) in data" :key="index.id">
<el-submenu :index="item.index" >
<template slot="title">
<i class="el-icon-s-home"></i>
<span slot="title">{{item.name}}</span>
</template>
<div v-for="chidren in item.chidren" :key="chidren.id">
<el-menu-item :index="chidren.index" :route="chidren.route">
<i class="el-icon-pie-chart"></i>
<span slot="title">{{chidren.name}}</span>
</el-menu-item>
</div>
</el-submenu>
</div>
</el-menu>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "homepage",
data() {
return {
username: "admin",
data: [{name:"欢迎页",index:"1",route:"/welcome"},
{name:"banner管理",index:"2",route:"/banner"},
{name:"公告管理",index:"3",route:"/notice"},
{name:"课程管理",index:"4",route:"/course"},
{name:"消息管理",index:"5",route:"/message"},
{name:"后台管理",index:"6",
chidren:[{name:"模块管理",index:"6-1",route:"/module"},
{name:"角色管理",index:"6-2",route:"/role"},
{name:"后台用户管理",index:"6-3",route:"/id"},
{name:"修改密码",index:"6-4",route:"/password"}]},
{name:"用户管理",index:"7",route:"/user"}
]
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
};
1.Vue动态渲染列表------v-for用法详解:
Html:
<figure v-for="list in lists">
<div>
<a v-bind:href=" list.big">
<img v-bind:src="list.small">
</a>
</div>
</figure>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
渲染在页面上的样式: < figure >...</ figure >
< figure >...</ figure >
< figure >...</ figure >
用法:
- 想动态增加那个元素就在其上加 :
v-for=‘[自定义名字] in [json中数组名字]’
- 绑定在html中的数据用 :
(1)元素内部的属性用v-bind:[属性] = ‘[自定义名字].json数组中的属性’
(2)标签内容引用 {{ [自定义名字].json数组中的属性 }}
评论