Vue实现价格实时计算

需求分析

商品有附加选购，需对多个附加选项价格进行实时勾选计算

使用属性

vue的computed 属性，computed 相较watch属性性能更优，watch属性多用于监听路由，况且computed 属性有名字给你叫‘计算’属性，当然是用来计算的。

后台返回数据格式

多选列表数据

checkBoxList:[
	{
	productName:'apple',
	price:100，
	id:1
	},
	{
	productName:'banana',
	price:90,
	id:2
	},
	{
	productName:'orange',
	price:20,
	id:3
	},
]

使用cube-UI框架的CheckboxGroup 复选框组 会返回一个你勾选的id数组,如（选择了’apple’和‘banana’则返回[1,2]）
我们使用checkedArr保存这个勾选了的数组

checkedArr:[1,2]

思路

只要通过id把选中的数组过滤出来，再对数组的price相加即可

reslut:[
	{
	productName:'apple',
	price:100，
	id:1
	},
	{
	productName:'banana',
	price:90,
	id:2
	},
	]

一开始我想用js filter()方法把数组过滤，使用后发现数据格式不对，查了下资料需要使用find()方法替代，再使用