uni-app学习笔记十--vu3 computed的运用(二)

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

下面是代码实现:

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

html 复制代码
<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.value
		goods.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 函数),实时计算所有被选中商品(checkedtrue)的总价格。

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

javascript 复制代码
const totalPrice = computed(()=>{
	 return goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0)
})
  1. .filter(item => item.checked)

    • 过滤 goods.value 数组,只保留 checkedtrue 的商品(即用户选中的商品)。
  2. .reduce((prev, curr) => prev + curr.price, 0)

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

      • 从初始值 0 开始,遍历每个商品(curr)。

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

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

相关推荐
健康平安的活着5 分钟前
langchain4j笔记篇(阳哥)
笔记
一川月白7097 分钟前
51单片机---硬件学习(跑马灯、数码管、外部中断、按键、蜂鸣器)
单片机·学习·51单片机·外部中断·蜂鸣器·数码管·跑马灯
励志不掉头发的内向程序员17 分钟前
STL库——二叉搜索树
开发语言·c++·学习
ホロHoro1 小时前
学习笔记:MYSQL(4)
笔记·学习·mysql
2501_915918411 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
aaaweiaaaaaa2 小时前
c++基础学习(学习蓝桥杯 ros2有C基础可看)
c++·学习·蓝桥杯·lambda·ros2·智能指针·c++类
黑马源码库miui520862 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
MadPrinter2 小时前
SpringBoot学习日记 Day11:博客系统核心功能深度开发
java·spring boot·后端·学习·spring·mybatis
wanzhong23333 小时前
ArcGIS学习-18 实战-降雨量空间分布插值分析
学习·arcgis
wanzhong23334 小时前
ArcGIS学习-19 实战-表面分析
学习