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>