Vue.js 컴포넌트 트리는 무한 트리 메뉴를 구현합니다.

및
• 태그를 사용하여 트리를 구현한 코드를 공유해 주세요. 더 좋은 내용이 있으면 공유해 주세요.
  여기에서 코드를 찾으세요:

  html 코드:

  <div class="tree">
   <nav class=&#39;navbar&#39;>
   <ul class=&#39;nav nav-stacked&#39;>
   <template v-for=&#39;item in menus&#39;>
   <li role=&#39;presentation&#39; v-if=&#39;!item.children&#39;><a href="#">{{item.text}}</a></li>
   <li role=&#39;presentation&#39; v-if=&#39;item.children&#39;><a href="#" v-on:click=&#39;toggleChildren(item)&#39;>{{item.text}}<span class=&#39;glyphicon&#39; v-bind:class=&#39;{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }&#39;></span></a>
   <ul v-show=&#39;item.expanded&#39; class="childs">
   <li v-for=&#39;child in item.children&#39;><a href="#">{{child.text}}</a></li>
   </ul>
   </li>
   </template>
   </ul>
   </nav>
  </div>

  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:[]
   }]
   }
   },

  렌더링:

  

  위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 PHP 중국어 웹사이트를 구독하시기를 바랍니다.

  무한 트리 메뉴를 구현한 Vue.js 컴포넌트 트리에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!