atui
Version:
components built with Vue.js
116 lines (110 loc) • 2.47 kB
Markdown
order: 3
title:
zh-CN: 绑定数据自动渲染
en-US: Type
## zh-CN
如果你的menu是动态生成的，也可以通过给menu组件绑定一个数据结构来动态自动渲染，详细的数据结构参考下面的文档
## en-US
````jsx
<v-menu @click.native="click" v-model="menuData">
</v-menu>
````
````vue-script
new Vue({
el: 'body',
components: {
vMenu: atui.Menu,
vMenuItem: atui.Menu.MenuItem,
vMenuItemGroup: atui.Menu.MenuItemGroup,
vSubMenu: atui.Menu.SubMenu
},
data: {
menuData: [
{
type: 'SubMenu',
uuid: 'sub1',
title: '导航一',
show: true, // 是否展开SubMenu
children: [
{
type: 'MenuItemGroup',
title: '分组1',
uuid: 'sub1',
children: [
{
type: 'MenuItem',
uuid: '1',
content: '<a href="//github.com/aliqin/atui">选项1</a>'
},
{
type: 'MenuItem',
uuid: '2',
selected: true, // 是否选中该菜单项
content: '选项2'
}
]
},
{
type: 'MenuItemGroup',
title: '分组2',
uuid: 'sub2',
children: [
{
type: 'MenuItem',
uuid: '3',
content: '选项3'
},
{
type: 'MenuItem',
uuid: '4',
content: '选项4'
}
]
}
]
},
{
type: 'SubMenu',
title: '导航二',
uuid: 'sub2',
children: [
{
type: 'MenuItem',
uuid: '5',
content: '选项5'
},
{
type: 'MenuItem',
uuid: '6',
content: '选项6'
},
{
type: 'SubMenu',
uuid: 'sub3',
title: '三级导航',
children: [
{
type: 'MenuItem',
uuid: '7',
content: '选项7'
},
{
type: 'MenuItem',
uuid: '8',
content: '选项8'
}
]
}
]
}
]
},
methods: {
click(e,d) {
console.log('menu-click',e,d)
}
}
})
````