vue商城统计选中数量及计算价格案例

我们在日常开发的过程中，难免会遇到客户需要开发商城的项目，在该项目中，购物车列表中的计算所选商品的价格及所选数量尤其是重中之重，以下demo可以进行参考

<template>
	<view class=\"out\">
		<checkbox-group name=\"\" @change=\"selectPrice\">
			<view class=\"item\" v-for=\"(item,index) in goods\" :key=\"item.id\">
				<checkbox :value=\"item.id\"></checkbox>
				<text class=\"title\">{{item.name}}</text>
				<text class=\"price\">{{item.price}}元</text>
				<text class=\"del\">删除</text>
			</view>
		</checkbox-group>
		<view class=\"totalPrice\">
			共选了{{totalNum}}件  价格：{{totalPrice}}元
		</view>
		<view>{{selectGroup}}</view>
		<view>{{goods}}</view>
	</view>
</template>

下面的方法为js的写法

<script setup>
	import {computed, ref} from \"vue\";
	const goods = ref([
		{id:\"11\",name:\"手机\",price:3369,checked:false},
		{id:\"12\",name:\"电脑\",price:6985,checked:false},
		{id:\"13\",name:\"打印机\",price:1569,checked:false},
		{id:\"14\",name:\"照相机\",price:36256,checked:false},
	])
	const selectGroup = ref([])
	const totalNum = computed(()=>{
		return selectGroup.value.length
	})
	function selectPrice(e){
		selectGroup.value = e.detail.value
		goods.value.forEach(item=>{
			item.checked = selectGroup.value.includes(item.id)
		});
	}
	const totalPrice = computed(()=> goods.value.filter(item=>item.checked).
	        reduce((prev,curr)=>prev+curr.price,0))
</script>