Maison  >  Article  >  interface Web  >  L'arborescence des composants Vue.js implémente le menu arborescent infini

L'arborescence des composants Vue.js implémente le menu arborescent infini

高洛峰
高洛峰original
2017-01-16 11:50:323021parcourir

Partagez un morceau de code qui utilise les balises

    et
  • pour implémenter l'arborescence. Si vous avez un meilleur espoir, partagez-le.
    Regardez ici le code :

    code 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>

    code js :

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

    Rendu :

    Larborescence des composants Vue.js implémente le menu arborescent infini

    Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde s'abonnera au site Web PHP chinois.

    Pour plus d'articles liés à l'arborescence des composants Vue.js implémentant le menu arborescent infini, veuillez faire attention au site Web chinois de PHP !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn