vue购物车价格计算全选

最新推荐文章于 2023-08-15 00:42:53 发布

郅菇凉

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量3.6k

点赞数 2

文章标签： vue购物车购物车 vue全选反选价格计算 vue失焦事件

本文链接：https://blog.youkuaiyun.com/qq_24612793/article/details/81199756

版权

该博客介绍了如何在Vue应用中实现购物车功能，包括全选、反选商品以及单选操作。购物车中的商品价格能够实时更新，并且在商品数量为零时进行了失焦处理。参考了其他作者的代码并进行了优化，以更好地模拟实际购物车体验。

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

购物车展示图

<template>
<div class="main_contain">
    <header class="aui-header-default aui-header-fixed ">
        <a href="javascript:history.back(-1)" class="aui-header-item">
            <i class="aui-icon aui-icon-back"></i>
        </a>
        <div class="aui-header-center aui-header-center-clear">
            <div class="aui-header-center-logo">
                <div class="">购物车</div>
            </div>
        </div>
    </header>
    <div class="background_color"></div>
    <section>
        <div class="shop_car" v-for="(item,index) in mylist" :key="index">
            <div class="aui-car-box-name">
                <input type="checkbox" class="check goods-check goodsCheck"  v-model="item.this_all" @change="check_list(index)">
                <h3>
                    <a href="#">{
  {item.oname}}</a>
                </h3>
                <div class="aui-car-coupons">
                    <a href="#">领券</a>
                    <a href="#">编辑</a>
                </div>
            </div>
            <div class="aui-car-box-list">
                <ul>
                    <li v-for="(goods,nindex) in item.newlist" :key="nindex">
                        <div class="aui-car-box

最低0.47元/天解锁文章