利用v-for写出三级嵌套

<div id="app">
            <div v-for="item in items" :key="item.id">
                <h1>{{item.name}}</h1>
                <div v-for="ar in item.itemse" :key="items.id">
                    <h2>{{ar.text}}</h2>
                    <div v-for="(ss,index) in ar.arr3"  :key="ar.index">
                        <h3>{{ss.text}}</h3>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    message: "hello world",
                    items: [{
                            id: 1,
                            name: "可乐",
                            itemse: [{
                                    id: 4,
                                    text: "冷冻可乐",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                                {
                                    id: 5,
                                    text: "香草可乐",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                            ],
                        },

                        {
                            id: 2,
                            name: "雪碧",
                            itemse: [{
                                    id: 6,
                                    text: "冷冻雪碧",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                                {
                                    id: 7,
                                    text: "青柠雪碧",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                            ],
                        },
                        {
                            id: 3,
                            name: "橙子",
                            itemse: [{
                                    id: 8,
                                    text: "冷冻橙子",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                                {
                                    id: 9,
                                    text: "新鲜橙子",
                                    arr3: [{
                                        text: '农夫山泉'
                                    }, {
                                        text: '农夫山泉'
                                    }]
                                },
                            ],
                        },
                    ],
                },

            });
        </script>

标签：name,itemse,农夫山泉,嵌套,写出,arr3,text,id,三级
来源： https://blog.csdn.net/m0_62003066/article/details/120980158