点种类,上面的图片和价钱获取对应的值(1)

这篇文章介绍了如何在Vue.js项目中,使用console.log显示商品数量,并利用v-for循环机上餐食列表。展示了如何绑定商品价格、名称和操作按钮,如增加购买数量以及提交订单。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

console.log('数量 ’ + this.newnum)

json数据

“skuList”:

[{

“name”: “种类”,

“list”: [{

“price”: “15”,

“name”: “面条”,

“goods_img”: “//img.alicdn.com/imgextra/i3/2751483692/O1CN01hiPxvJ1d8ymPJRqEc_!!2751483692.jpg_200x200Q50s50.jpg”

}, {

“price”: “20”,

“name”: “米饭”,

“goods_img”: “//img.alicdn.com/imgextra/i3/3874929428/O1CN01E934K92JW4abw8aUg_!!3874929428.jpg_2200x2200Q50s50.jpg_.webp”

}]

}]

源码:

机上餐食

Restaurant

{{price}}

<a class=“sku-close” @click=“cancelMask” aria-label=“关闭”>

种类

    v-for=“(l,index) in item.list”

    v-bind:key=“index”

    @click=“specificationBtn(l,index)”

    :class=“{orange:i === index}”

    {{l.name}}

    购买数量

    -

    <button class=“van-stepper__plus” @click=“increment”>+

    您的座位号

    <cube-button @click=“sku_addCart” :primary=“true”>提交订单

    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值