vue v-for嵌套

vue v-for循环嵌套

<div v-for="goods_list in goods_lists">
    <div v-for="good in goods_list.goods">
        <img class="menu_goods_img" :src="good.src">
        <div>
            <p>{{good.goods_title}}<span>({{good.goods_mintit}})</span></p>
            <p>{{good.goods_des}}</p>
            <div>
                <p><span>{{good.goods_price}}</span></p>
                <p>+</p>
            </div>
        </div>
    </div>
</div>

注意:这里的 goods 必须要是 goods_lists 内的一个属性

模拟的数据:

data() {
    return {
        goods_lists:[
            {goods:[
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'}
            ]},
            {goods:[
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'}
            ]},
            {goods:[
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'}
            ]},
            {goods:[
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'},
                {src:'/static/images/shop/beef_03.png',goods_title:'我是标题',goods_mintit:'我是副标题',goods_price:'16',goods_des:'我是描述'}
            ]},
        ]
    }
}
发布了18 篇原创文章 · 获赞 4 · 访问量 4884

猜你喜欢

转载自blog.csdn.net/xiaojun201593/article/details/99734000