<div id="app">
    <!--    v-for解决循环问题 更高效 会复用原有的结构-->
    <!--    要循环谁就给谁加v-for-->
    <!--    默认是value in 数组/(value,index) in 数组-->
<!--    in后面可接数字、字符串、对象-->
    <ul>
        <li v-for="(fruit,index) in fruits">{{fruit.name}}{{index+1}}
            <ul>
                <li v-for="(c,childIndex) in fruit.color">{{index+1}}.{{childIndex+1}}{{c}}</li>
            </ul>
        </li>

    </ul>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            fruits: [{name: '香蕉', color: ['green','yellow']},
                {name: '苹果',color: ['red','yellow','green']},
                {name: '西瓜',color:['pink']}]
        }
    });
</script>