uniapp小程序购物车功能，实现全选反选单选，计算总价

最新推荐文章于 2024-05-18 08:57:21 发布

JY的山头

最新推荐文章于 2024-05-18 08:57:21 发布

阅读量3.5k

点赞数 8

分类专栏： uniapp 小程序文章标签： vue.js

本文链接：https://blog.csdn.net/m0_49078080/article/details/108752327

版权

本文介绍了如何使用uniapp开发小程序的购物车功能，包括全选、反选和单选操作，并详细讲解了对应的HTML和JS代码实现，同时展示了功能实现后的效果，最后通过data定义的数据计算购物车商品总价。

摘要由CSDN通过智能技术生成

功能效果

在这里插入图片描述

实现代码

HTML部分

	<view class="list-item" v-for="(item,index) in goodList" :key='index'>
			<view class="group">
				<checkbox-group @change="changeitem(item)" checked class="checkbox">
					<checkbox :value="item.unitPrice" :checked="item.checked" />
				</checkbox-group>

				<image :src="item.src"></image>
				<view class="goods">
					<view class="price">￥{
  {item.unitPrice}}</view>
					<view class="name">{