検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Vue.js コンポーネント ツリーは無限ツリー メニューを実装します

Vue.js コンポーネント ツリーは無限ツリー メニューを実装します

高洛峰
高洛峰オリジナル
2017-01-16 11:50:323025ブラウズ

    タグと
  • タグを使用してツリーを実装するコードを共有します。これより良い方法があれば、共有してください。
    コードはこちらをご覧ください:

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

    レンダリング:

    Vue.js コンポーネント ツリーは無限ツリー メニューを実装します

    以上がこの記事の全内容であり、皆さんの学習に役立つことを願っています。みんながもっと中国語のウェブサイトを使ってくれることを願っています。

    無限ツリー メニューを実装する Vue.js コンポーネント ツリーに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Vue2 はコンポーネント props の双方向バインディングを実装します次の記事：Vue2 はコンポーネント props の双方向バインディングを実装します

関連記事

続きを見る