【vue循环】如何显示商家与商家里的商品数据？

最近有小伙伴做项目没有思路，
它只会通过v-for循环显示商家数据，
而商品数据却没有思路，
其实原理很简单，

模拟商家数据如下：

list: [{
                id: '1',
                name: '店铺一',
                list: [{
                    name: '商品1',
                    id: '11'
                }, {
                    name: '商品2',
                    id: '12'
                }]
            }, {
                id: '2',
                name: '店铺二',
                list: [{
                    name: '商品2店铺二',
                    id: '21'
                }, {
                    name: '商品2店铺二',
                    id: '22'
                }]
            }]

首先我们先用v-for="item in list"一键绑定如下图：

循环遍历商家数据，
而这个item则是每个商家的数据，
其中item.list则表示为商品数据，
所以我们只需要继续通过v-for指令，
遍历循环商品数据即可，
如v-for="item2 in item.list"，如下图

将item改为item2用来区分商家与商品，
这样item2就表示为商品数据了，
最后在将商品数据进行双向绑定，
注意：这里的商品名称都用item2来进行表示，
即可正常的显示商品数据了。
最后我们来对照一下,
可以看出渲染之后的效果，
与数据里的数据正好一一对应。

用guiplan可视化操作最后我们来看看生成之后的源代码

<template>
 <div class=" uc986a">
            <div v-for="(item,index) in list" class=" u57daf">
                <div class=" ud74c1">
                    <i><svg t="1649661246606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" width="20" height="20">
                            <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2942" fill="#cdcdcd"></path>
                            <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2943" fill="#cdcdcd"></path>
                        </svg>
                    </i>
                    <i class="  u51a08active"><svg t="1649677167350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9222" width="20" height="20">
                            <path d="M512 1011.84A500.48 500.48 0 1 1 1012.48 512 501.12 501.12 0 0 1 512 1011.84zM512 73.6A438.4 438.4 0 1 0 950.4 512 439.04 439.04 0 0 0 512 73.6z" fill="#d81e06" p-id="9223"></path>
                            <path d="M512 511.36m-236.8 0a236.8 236.8 0 1 0 473.6 0 236.8 236.8 0 1 0-473.6 0Z" fill="#d81e06" p-id="9224"></path>
                        </svg>
                    </i>
                    <div class=" uc2e84">
                        <i class="  u51a082"><svg t="1649663790334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4254" width="18" height="15">
                                <path d="M844.938811 567.613622c-17.251919 0-31.231305 13.978363-31.231305 31.231305L813.707506 825.381383c0 39.028898-26.849508 71.997778-58.629305 71.997778L269.838681 897.379161c-31.779797 0-58.629305-32.969902-58.629305-71.997778L211.209376 598.844927c0-17.251919-13.983479-31.231305-31.231305-31.231305s-31.231305 13.978363-31.231305 31.231305L148.746766 825.381383c0 74.143651 54.324256 134.460388 121.090892 134.460388l485.23952 0c66.772776 0 121.090892-60.316737 121.090892-134.460388L876.16807 598.844927C876.170117 581.591985 862.190731 567.613622 844.938811 567.613622z" p-id="4255" fill="#2c2c2c"></path>
                                <path d="M772.71693 273.572726 252.199952 273.572726c-17.246803 0-31.231305 13.978363-31.231305 31.231305s13.983479 31.231305 31.231305 31.231305l520.516977 0c17.251919 0 31.231305-13.978363 31.231305-31.231305S789.968849 273.572726 772.71693 273.572726z" p-id="4256" fill="#2c2c2c"></path>
                                <path d="M950.22474 283.585777c-0.010233-0.030699-0.020466-0.061398-0.040932-0.101307l-1.454118-3.965312c-1.13894-3.110851-2.734274-5.937223-4.656043-8.417717l-67.443042-130.698714c-23.880897-48.859801-65.064878-75.820849-116.079762-75.93239L266.48633 64.470337c-54.862515 0-87.75567 21.593807-113.517403 74.53967l0.188288 0.091074c-3.035126 4.971222-6.577812 11.42726-11.192923 19.824511-7.045463 12.840446-16.458857 30.001291-25.934672 47.344285-38.962384 71.296813-39.928385 73.92978-41.057091 76.999698-10.166547 27.702945-10.166547 43.75555-10.166547 62.380746 0.071631 72.160483 39.383986 138.109498 102.700033 172.502819 0.467651 0.274246 0.945535 0.548492 1.433652 0.813528 26.75741 14.263865 57.836243 21.50171 92.473111 21.50171 46.617737-0.14224 91.034343-16.642029 125.981273-46.083571 34.753525 29.116131 78.94705 45.50438 125.630279 45.788859 46.048779-0.366344 89.946568-16.794501 124.542504-45.911656 35.012422 29.421077 79.57229 45.819558 126.479623 45.819558 35.246759-0.183172 66.813708-7.777127 93.78499-22.558785 63.11241-34.494629 102.304014-100.616582 102.263082-172.400488C960.177416 326.833767 960.258257 311.034942 950.22474 283.585777zM897.633964 345.001545c0.020466 49.072649-26.707268 94.181009-69.791529 117.726262-17.791202 9.759271-39.364543 14.771425-63.956637 14.893198-39.750329 0-77.081563-17.303085-102.425787-47.477314-5.92699-7.065929-14.680351-11.142781-23.911596-11.142781l-0.010233 0c-9.231245 0-17.984606 4.087085-23.921829 11.162224-25.085328 29.909194-61.933561 47.242977-100.647281 47.547923-39.460734-0.243547-76.547397-17.537422-101.740172-47.446615-5.932106-7.045463-14.675234-11.112082-23.886013-11.112082-0.010233 0-0.020466 0-0.025583 0-9.221012 0.010233-17.969257 4.087085-23.896246 11.151991-25.340131 30.193673-62.594617 47.578622-102.105492 47.700395-23.672142 0-44.48312-4.564969-61.877279-13.57211-0.396019-0.233314-0.793062-0.457418-1.199315-0.681522-43.73099-23.311939-70.920236-68.592214-70.971401-118.132514 0-15.809057 0-23.209608 5.92699-39.688931 7.03523-14.161534 71.052243-130.708947 75.027787-137.865951 0.320295-0.558725 0.620124-1.13894 0.904603-1.728364 16.408715-33.711799 28.714995-39.404452 57.358359-39.404452l493.992881 0c27.053146 0.061398 46.724161 13.510712 60.143799 41.132816 0.11154 0.224104 0.224104 0.447185 0.335644 0.671289l71.225181 138.028657C897.735271 322.45197 897.704572 329.670371 897.633964 345.001545z" p-id="4257" fill="#2c2c2c"></path>
                                <path d="M390.58165 586.848709c-17.246803 0-31.231305 13.978363-31.231305 31.231305l0 30.468942c0 17.251919 13.983479 31.231305 31.231305 31.231305 17.246803 0 31.231305-13.978363 31.231305-31.231305l0-30.468942C421.812955 600.827071 407.829476 586.848709 390.58165 586.848709z" p-id="4258" fill="#2c2c2c"></path>
                                <path d="M634.335233 586.848709c-17.251919 0-31.231305 13.978363-31.231305 31.231305l0 30.468942c0 17.251919 13.978363 31.231305 31.231305 31.231305 17.251919 0 31.231305-13.978363 31.231305-31.231305l0-30.468942C665.566538 600.827071 651.587152 586.848709 634.335233 586.848709z" p-id="4259" fill="#2c2c2c"></path>
                                <path d="M589.479629 728.293161c-14.267958-9.404184-33.56956-5.418406-43.155892 8.753361-0.132006 0.193405-13.613042 19.75288-34.174334 19.75288-19.992333 0-32.425504-18.10638-33.264615-19.367093-9.174963-14.426571-28.288277-18.807345-42.830481-9.759271-14.654768 9.099239-19.153222 28.353768-10.04989 43.00342 11.208273 18.044982 41.971927 48.584532 86.144986 48.584532 43.959188 0 75.098395-30.306236 86.571704-48.219211C607.941096 756.646929 603.752704 737.686089 589.479629 728.293161z" p-id="4260" fill="#2c2c2c"></path>
                            </svg>
                        </i>
                        <span class="  u1404d">{{item.name}}
                        </span>
                        <i><svg t="1649664442692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" width="10" height="10">
                                <path d="M303.593 56.146c8.889 0 17.777 3.406 24.524 10.22l416.225 417.16c13.63 13.738 13.597 35.906-0.07 49.605L328.048 950.304c-14.694 14.75-39.442 13.425-52.334-3.994-10.419-14.076-7.23-34.124 5.14-46.521L671.09 508.664a0.622 0.622 0 0 0 0.001-0.878l-389.75-390.489c-14.796-14.915-15.705-40.458 0.69-53.595a34.441 34.441 0 0 1 21.562-7.556z" fill="" p-id="6181"></path>
                            </svg>
                        </i>
                    </div>
                    <div class=" youhuiquan">
                        <span class="  youhuiquanspan">优惠券
                        </span>
                    </div>
                </div>
                <div class=" u6c5f0">
                    <span class="  ua44d0">满减
                    </span>
                    <span class="  ue211f">满68元减2元
                    </span>
                    <div>
                        <span class=" ue211f  ">去凑单
                        </span>
                        <i><svg t="1649664442692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" width="10" height="10">
                                <path d="M303.593 56.146c8.889 0 17.777 3.406 24.524 10.22l416.225 417.16c13.63 13.738 13.597 35.906-0.07 49.605L328.048 950.304c-14.694 14.75-39.442 13.425-52.334-3.994-10.419-14.076-7.23-34.124 5.14-46.521L671.09 508.664a0.622 0.622 0 0 0 0.001-0.878l-389.75-390.489c-14.796-14.915-15.705-40.458 0.69-53.595a34.441 34.441 0 0 1 21.562-7.556z" fill="" p-id="6181"></path>
                            </svg>
                        </i>
                    </div>
                </div>
                <div v-for="(item2,index2) in item.list" class=" u7497b">
                    <div class=" u11609">
                        <i><svg t="1649661246606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" width="20" height="20">
                                <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2942" fill="#cdcdcd"></path>
                                <path d="M512 106.667A405.333 405.333 0 1 1 106.667 512 405.333 405.333 0 0 1 512 106.667m0-64A469.333 469.333 0 1 0 981.333 512 469.333 469.333 0 0 0 512 42.667z" p-id="2943" fill="#cdcdcd"></path>
                            </svg>
                        </i>
                        <div class=" u46556">
                            <div class=" u3b34d">
                                <img class=" ue1bec" src="http://www.guiplan.com/userWork/H1gPWyH4ix/YuanShengMoBanShiChang/images/列表模板.jpg" alt="guiplan官网" />
                            </div>
                            <div class=" u2265a">
                                <div class=" u12e7f">{{item2.name}}
                                </div>
                                <div class=" u65c2b">
                                    <span class="  u8b729">通过软件打开即可
                                    </span>
                                    <i><svg t="1649668651696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6386" width="8" height="8">
                                            <path d="M964.154 299.893c0 8.889-3.407 17.777-10.22 24.524L536.773 740.64c-13.738 13.63-35.907 13.598-49.606-0.07L69.995 324.35c-14.75-14.695-13.426-39.443 3.994-52.336 14.076-10.418 34.123-7.228 46.52 5.14L511.636 667.39a0.623 0.623 0 0 0 0.878 0.001l390.49-389.75c14.915-14.797 40.458-15.705 53.595 0.69a34.447 34.447 0 0 1 7.556 21.562z" fill="" p-id="6387"></path>
                                        </svg>
                                    </i>
                                </div>
                                <div class=" ua5f7f">
                                    <span class="  u84e1a">软件
                                    </span>
                                    <div class=" u5e521">
                                        <span class="  udb334">6期
                                        </span>
                                        <span class="  ue6f35">分期免息
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" u563f7">
                        <div class=" uf879b">
                        </div>
                        <div class=" uf87ad">
                            <div class=" uc1fa7">
                                <span class="  uad76b">￥
                                </span>
                                <span class="  u6584a">99
                                </span>
                                <span>.
                                </span>
                                <span class="  ue3b0c">90
                                </span>
                            </div>
                            <div class=" ua9f12">
                                <div class=" u0d1ba"><svg t="1649676027820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7447" width="16" height="16">
                                        <path d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z" p-id="7448"></path>
                                    </svg>
                                </div>
                                <div>
                                    <input v-model="searchStr" class="  ud4f2d" type="text" placeholder />
                                </div>
                                <div class=" uff3ba"><svg t="1649676072403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8427" width="16" height="16">
                                        <path d="M512 512V170.666667h42.666667v341.333333h341.333333v42.666667h-341.333333v341.333333h-42.666667v-341.333333H170.666667v-42.666667h341.333333z" fill="#444444" p-id="8428"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>


<scripte>
var app = new Vue({
    el: '#defaultId1',
    name: '',
    mounted() {
        // defaultLoad
        // jimiMountedStart

        // jimiMountedEnd

    },
    components: {},
    data() {
        return {
            // insertData
            // jimiDataStart

            list: [{
                id: '1',
                name: '店铺一',
                list: [{
                    name: '商品1',
                    id: '11'
                }, {
                    name: '商品2',
                    id: '12'
                }]
            }, {
                id: '2',
                name: '店铺二',
                list: [{
                    name: '商品2店铺二',
                    id: '21'
                }, {
                    name: '商品2店铺二',
                    id: '22'
                }]
            }],
            searchStr: '2'
            // jimiDataEnd

        }
    },
    methods: {
        default () {},
        // insertMethod
        // jimiMethodStart

        // jimiMethodEnd

        // methodsCode

    },
    computed: {}
})


</script>
<style>

.main {
    margin: 0px;
    padding: 0px;
}

.jimicssStart {}

.uc986a {
    display: flex;
    flex-direction: column;
}

.u57daf {
    display: flex;
    background-color: rgba(255, 255, 255, 1);
    margin-top: 1em;
    margin-left: 0.5em;
    margin-bottom: 1em;
    margin-right: 0.5em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    flex-direction: column;
    box-shadow: 0em 0em 0.1em 0.1em rgba(239, 235, 235, 1);
}

.ud74c1 {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}

.u51a08active {
    display: none;
}

.uc2e84 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 0%;
    margin-left: 0.5em;
    font-weight: bold;
    flex: auto;
    -webkit-box-orient: vertical;
}

.u51a082 {
    margin-right: 0.5em;
}

.u1404d {
    display: -webkit-box;
    font-size: 1.1em;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.youhuiquan {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF0F5;
    margin-left: 0.5em;
    border-top-left-radius: 0.9em;
    border-bottom-left-radius: 0.9em;
    border-top-right-radius: 0.9em;
    border-bottom-right-radius: 0.9em;
    text-align: center;
}

.youhuiquanspan {
    padding-top: 0.3em;
    color: rgba(225, 54, 39, 1);
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.3em;
    font-size: 0.9em;
}

.u6c5f0 {
    display: flex;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.6em;
}

.ua44d0 {
    background-color: #F7381B;
    margin-right: 0.5em;
    padding-top: 0.1em;
    color: #FFFFFF;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.1em;
    font-size: 0.8em;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

.ue211f {
    margin-left: 0.5em;
    font-weight: bold;
    font-size: 0.9em;
    flex: auto;
}

.u7497b {
    margin-bottom: 0.5em;
}

.u11609 {
    display: flex;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.u46556 {
    display: flex;
    margin-left: 0.5em;
    flex: auto;
}

.u3b34d {
    margin-right: 0.5em;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    overflow-x: hidden;
    overflow-y: hidden;
}

.ue1bec {
    width: 6.6em;
    height: 100%;
}

.u2265a {
    width: 0%;
    margin-left: 0.5em;
    margin-right: 0.5em;
    flex: auto;
    overflow-y: auto;
}

.u12e7f {
    display: -webkit-box;
    margin-bottom: 0.5em;
    color: rgba(0, 0, 0, 1);
    font-weight: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.u65c2b {
    display: flex;
    width: max-content;
    background-color: rgba(234, 230, 230, 1);
    margin-bottom: 0.5em;
    padding-top: 0.2em;
    color: rgba(89, 88, 88, 1);
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.2em;
    font-size: 0.8em;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.u8b729 {
    display: -webkit-box;
    margin-right: 0.5em;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ua5f7f {
    display: flex;
    align-items: center;
}

.u84e1a {
    color: rgba(58, 200, 60, 1);
    padding-left: 0.2em;
    padding-right: 0.2em;
    font-size: 0.8em;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(58, 200, 60, 1);
}

.u5e521 {
    display: flex;
    background-color: rgba(248, 57, 28, 1);
    margin-left: 0.5em;
    border-top-left-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    overflow-x: hidden;
    overflow-y: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 69, 0, 1);
}

.udb334 {
    background-color: rgba(255, 255, 255, 1);
    color: #F62415;
    padding-left: 0.1em;
    padding-right: 0.1em;
    font-size: 0.8em;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}

.ue6f35 {
    color: rgba(247, 247, 247, 1);
    padding-left: 0.3em;
    padding-right: 0.3em;
    font-size: 0.8em;
}

.u563f7 {
    display: flex;
    margin-bottom: 0.5em;
}

.uf879b {
    width: 9.3em;
}

.uf87ad {
    display: flex;
    justify-content: space-between;
    flex: auto;
}

.uc1fa7 {
    display: flex;
    align-items: flex-end;
    color: rgba(255, 69, 0, 1);
}

.uad76b {
    font-size: 0.8em;
}

.u6584a {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: -0.1em;
}

.ue3b0c {
    font-size: 0.9em;
}

.ua9f12 {
    display: flex;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(238, 236, 235, 1);
}

.u0d1ba {
    display: flex;
    align-items: center;
    padding-top: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.1em;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: rgba(238, 236, 235, 1);
}

.ud4f2d {
    width: 2em;
    height: 1.5em;
    background-color: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em;
    flex: auto;
    text-align: center;
    border-style: none;
    outline: none;
}

.uff3ba {
    display: flex;
    align-items: center;
    padding-top: 0.1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-bottom: 0.1em;
    border-left-style: solid;
    border-left-width: 1px;
    border-left-color: rgba(238, 236, 235, 1);
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

.jimicssEnd {}

</style>