网站开发毕业设计源码百度地图推广怎么收费标准

在商城类项目中，经常需要根据用户选中的商品动态计算总价，此时可以使用computed计算属性动态计算。先来看效果：

下面是代码实现：

需要注意的是，vue中checked选中的值须为字符串类型，所以下面的id声明为字符串类型而不是整型。

<template><view class="out"><checkbox-group @change="itemChange"><view class="item" v-for="(item,index) in goods" :key="item.id"><checkbox :value="item.id" :checked=item.checked></checkbox><text class="title">{{item.name}}</text><text class="price">{{item.price}}元</text><text class="del" @click="remove(index)">删除</text></view></checkbox-group><view class="card"><view class="text">总共选择了{{selectedItems.length}}件商品，总价是{{totalPrice}}元</view></view></view>
</template><script setup>import {computed, ref} from "vue"const goods = ref([{"id":"1","name":"Apple",price:8999,checked:false},{"id":"2","name":"华为",price:3899,checked:false},{"id":"3","name":"小米",price:1999,checked:false},{"id":"4","name":"oppon",price:1699,checked:false},])const selectedItems = ref([])const totalPrice = computed(()=>{return goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0)})function remove(index){goods.value.splice(index,1)}function itemChange(e){selectedItems.value=e.detail.valuegoods.value.forEach(item=>{item.checked=selectedItems.value.includes(item.id)})}</script><style lang="scss">.out{padding: 10px;.item{padding: 10px 0;.price{margin-left: 30px;}.del{color:#c00;margin-left: 30px;}}    .card{margin-top: 30px;border-top: 1px solid #eee;padding: 10px 0;}}
</style>

在上面代码中实现了：

1. 在JS部分定义了商品集合，里边包含商品的id，名称，价格，是否选中；
2. 定义选中事件itemChange，在绑定的方法中获取选中的值，并实时监听子项的选中和取消选中，获得商品的选中状态；
3. 定义了一个名为 totalPrice 的计算属性（使用 Vue 的 computed 函数），实时计算所有被选中商品（checked 为 true）的总价格。

下面重点说下第3点：使用computed 实时计算选中商品的价格：

const totalPrice = computed(()=>{return goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0)
})

1. .filter(item => item.checked)

   • 过滤 goods.value 数组，只保留 checked 为 true 的商品（即用户选中的商品）。

2. .reduce((prev, curr) => prev + curr.price, 0)

   • 对过滤后的选中商品数组进行归约操作：

     • 从初始值 0 开始，遍历每个商品（curr）。

     • 将当前商品的价格（curr.price）累加到总和（prev）中。

   • 最终返回所有选中商品价格的总和。