uni-app学习笔记十--vu3 computed的运用(二)
在商城类项目中，经常需要根据用户选中的商品动态计算总价，此时可以使用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>
在上面代码中实现了：
- 在JS部分定义了商品集合，里边包含商品的id，名称，价格，是否选中；
- 定义选中事件itemChange，在绑定的方法中获取选中的值，并实时监听子项的选中和取消选中，获得商品的选中状态；
- 定义了一个名为
totalPrice的计算属性（使用 Vue 的computed函数），实时计算所有被选中商品（checked为true）的总价格。
下面重点说下第3点：使用computed 实时计算选中商品的价格：
const totalPrice = computed(()=>{return goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0)
})-
.filter(item => item.checked)-
过滤
goods.value数组，只保留checked为true的商品（即用户选中的商品）。
-
-
.reduce((prev, curr) => prev + curr.price, 0)-
对过滤后的选中商品数组进行归约操作：
-
从初始值
0开始，遍历每个商品（curr）。 -
将当前商品的价格（
curr.price）累加到总和（prev）中。
-
-
最终返回所有选中商品价格的总和。
-