vue.js - vue v-for循环

问题描述

问 题

[
    {
        'name':超巨,
        'child':[
            'name':巨星,
            'child':[
                'name':球星,
                'child':[
                    ....
                ]
            ]
        ]    
    },
    {
        'name':大神,
        'child':[
            'name':牛人,
            'child':[
                'name':高手,
                'child':[
                    'name': 菜鸟,
                    'child': [
                        .....
                    ]
                ]
            ]
        ]    
    }
]

如果用vue的v-for怎么去把上面的数据递归循环成下面这种，求谢

<ul>
    <li>超巨
        <ul>
            <li>巨星
                <ul>
                    <li>球星</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>大神
        <ul>
            <li>牛人
                <ul>
                    <li>高手
                        <ul>
                            <li>菜鸟</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

解决方案

差不多是一个组件，然后再组件中引用其本身

组件的主要代码

<template>
 <ul >
    <li>{{item.name}}</li>
        <my-child-item :item="subitem" v-for="subitem in item.child"></my-child-item>
 </ul>
</template>

<script>
export default {
name: 'my-child-item',
    props: {
      item:Object
    },
    data() {
      return {
      
      };
    },
    ...
}
</script>

这篇关于vue.js - vue v-for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！