Vue的v-for双层循环

vue的v-for双层循环

结构嵌套的父子循环

item表示当前的数据，index表示索引
key的作用：帮助Vue区分不同的元素，从而提高性能
in 后面表示遍历的数组

<div id="app">
        <ul v-for="(item, index) in list1" :key="index">
            <li v-for="(i, d) in item.listitem" :key="d">{{i.name}}</li>
        </ul>
    </div>

<script>
        let vm = new Vue({
            el: "#app",
            data: {
                list1: [
                    {
                        listitem: [
                            { name: 'apple' },
                            { name: 'banana' },
                            { name: 'orange' }
                        ]
                    },
                    {
                        listitem: [
                            { name: 'rape' },
                            { name: 'pea' },
                            { name: 'carrot' },
                        ]
                    }
                ],
            },
            methods: {}
        });
    </script>

展示出来的样式

结构没有关系的两个数组

	<div id="app">
        <div v-for="(item, index) in list2" :key="index">
            {{item.name}}
            <p v-for="(i, d) in listitem" :key="d">{{i.name}}</p>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list2: [
                    { name: 'apple' },
                    { name: 'banana' },
                    { name: 'orange' }
                ],
                listitem: [
                    { name: 'rape' },
                    { name: 'pea' },
                    { name: 'carrot' },
                ]
            },
            methods: {}
        });
    </script>

加个样式区别一下

	<style>
        #app div{
            width: 300px;
            height: 160px;
            border: 1px solid #e1e1e1;
        }
        #app p{
            color: gray;
        }
    </style>

展示出来的样式

变成一层嵌套一层