cari

Rumah >hujung hadapan web >tutorial js >Vue.js组件tree实现无限级树形菜单

Vue.js组件tree实现无限级树形菜单

高洛峰
高洛峰asal
2017-01-16 11:50:323054semak imbas

分享一段用 ff6d136ddc5fdfeffaf53ff6ee95f185和25edfb22a4f469ecb59f1190150159c6标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。
代码看这里喽:

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组件tree实现无限级树形菜单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支PHP中文网。

更多Vue.js组件tree实现无限级树形菜单相关文章请关注PHP中文网！


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Vue2实现组件props双向绑定Artikel seterusnya：使用vue.js制作分页组件

Artikel berkaitan

Lihat lagi