Vue.js组件树实现无限级树形菜单

分享一段用保险商实验所和里标签实现树的代码，可能写的不是很好，如果大家有更好的希望分享下。代码看这里喽：

超文本标记语言代码：

div class=' tree ' nav class=' nav bar ' ul class=' nav-stacked '模板v-for='菜单中的项目里角色='presentation' v-if='！项目。儿童a href=' # ' { { item。文本} }/a/李莉角色=' presentation ' v-if='项。children ' a href=' # ' v-: click=' toggleChildren(item)' { { item。text } } span class=' glyphicon ' v-bind : class=' { ' glyphicon-chevron-right ' :item.expanded，' glyphicon-chevron-down ' :项。展开的' }/span/a ul v-show='项目。展开的“class=”childs“Li v-for=”项。children ' a href=' # ' { { child。文本} }/a/Li/ul/Li/模板/ul/nav/div js代码：

方法： { togglechildren : }函数(item) { item.expanded=！item.expanded}，}，data(){ return { menu : [{ text : '水果，expanded:false，children:[{ text: '苹果，}，{ text: '荔枝}，{ text: '葡萄}，{ text: '火龙果}] }，{ text: '好吃的，expanded:false，children:[{ text: '糖，}，{ text: '面包}，{ text: '火腿}，{ text: '薯片}，{ text: '碎碎面}] }，{ text: '饮料，expanded:false，children:[] }] } }，效果图：

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。