码迷,mamicode.com
首页 > Web开发 > 详细

view js 实现 树形菜单

时间:2017-06-29 17:36:44      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:class   nbsp   ops   图标   style   code   使用   添加   javascrip   

添加一个模板。
<
template id="menu-template"> <li v-if="model.nodes!=undefined"> <a href="#" class="menu-dropdown"> <i class="menu-icon ${child.icon!‘‘}"></i> <span class="menu-text"> {{model.title}} </span> <i class="menu-expand"></i> </a> <ul class="submenu"> <item v-for="model in model.nodes" :model="model"></item> </ul> </li> <li v-else> <a href="javascript:void(0)" data-url=""><i class="menu-icon "></i> <!-- 图标 --> <span class="menu-text">{{model.title}}</span></a> </li> </template>
注册组件
Vue.component(‘item‘, { template: ‘#menu-template‘, props: { model: Object } })

使用:

<item  v-for="model in message" :model="model"></item>   message 为一个 数组

view js 实现 树形菜单

标签:class   nbsp   ops   图标   style   code   使用   添加   javascrip   

原文地址:http://www.cnblogs.com/whm-blog/p/7094588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!