suchen

Heim  >  Artikel  >  Web-Frontend  >  Der Komponentenbaum von Vue.js implementiert ein unendliches Baummenü

Der Komponentenbaum von Vue.js implementiert ein unendliches Baummenü

高洛峰
高洛峰Original
2017-01-16 11:50:323020Durchsuche

Teilen Sie einen Code, der

    -Tags verwendet, um den Baum zu implementieren. Wenn Sie eine bessere Hoffnung haben, teilen Sie ihn bitte.
    Suchen Sie hier nach dem Code:

    HTML-Code:

    <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-Code:

    methods: {
 toggleChildren: function(item) {
 item.expanded = !item.expanded;
 },
 },
 data() {
 return {
 menus:[{
 text:&#39;水果&#39;,
 expanded:false,
 children:[{
 text:&#39;苹果&#39;,
 },{
 text:&#39;荔枝&#39;
 },{
 text:&#39;葡萄&#39;
 },{
 text:&#39;火龙果&#39;
 }]
 },{
 text:&#39;好吃的&#39;,
 expanded:false,
 children:[{
 text:&#39;糖&#39;,
 },{
 text:&#39;面包&#39;
 },{
 text:&#39;火腿&#39;
 },{
 text:&#39;薯片&#39;
 },{
 text:&#39;碎碎面&#39;
 }]
 },{
 text:&#39;饮料&#39;,
 expanded:false,
 children:[]
 }]
 }
 },

    Rendering:

    Der Komponentenbaum von Vue.js implementiert ein unendliches Baummenü

    Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder die chinesische PHP-Website abonniert.

    Weitere Artikel zur Implementierung des unendlichen Baummenüs im Komponentenbaum von Vue.j finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vue2 implementiert die bidirektionale Bindung von Komponenten-RequisitenNächster Artikel：Vue2 implementiert die bidirektionale Bindung von Komponenten-Requisiten

In Verbindung stehende Artikel

Mehr sehen