search

Home >Web Front-end >JS Tutorial >Vue.js component tree implements infinite tree menu

Vue.js component tree implements infinite tree menu

高洛峰
高洛峰Original
2017-01-16 11:50:323056browse

Share a piece of code that uses

    and
  • tags to implement tree. It may not be very well written. If you have any better hope, please share it.
    Look here for the 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:

    Vue.js component tree implements infinite tree menu

    The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support the PHP Chinese website.

    For more articles related to Vue.js component tree implementing infinite tree menu, please pay attention to PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Vue2 implements two-way binding of component propsNext article：Vue2 implements two-way binding of component props

Related articles

See more