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

分享一段用

和
• 标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。
  代码看这里喽:

  html代码:

  js代码:

  methods: {
   toggleChildren: function(item) {
   item.expanded = !item.expanded;
   },
   },
   data() {
   return {
   menus:[{
   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组件学习教程进行学习。

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