计算属性,也就是使用2个或者两个以上的值来计算或者组合
首先我们先写两个输入框然后写一个框的组合:
方法(1):方法(2):就是使用官方给的一个是属性 computed
使用 computed 时需要注意的是,在模板成需要在变量后面添加 value 否者会直接把源码显示上去
方法(3):大家仔细看一下通过 computed 编写的代码是不是与 function 编写的代码很相识呢
这个编写出问题的原因就是因为我们在上面,没有为 numFun 后面添加小括号,因为他是一个方法而不是变量,所以我们需要为他添加括号
这个方法的代码因为一有一个返回,没有太大代码,所以我们可以简写一下:
方法(2)与方法(3)的对比,官方也说的很明确了,就是因为计算属性是有缓存的,方法呢就是你调用多少次就用会使用多少次;
接下来我们通过之前写的来编写和了解计算属性,找到这个页面然后计算你选中的物品的价格之合:
因为 checkBox 标签,他不能知道你选择了那个物品所以我们去官网找一下 也就看到了
checkbox-group 标签,在这个标签中我们需要为他设置唯一值才可以使用,但是唯一值需要是String(字符串) , 所以我们需要将数组的 id 修改一下:
因为我看他的名称也是唯一值所以我设置的是 :value=" item.name ",你们可以为他设置为
:value=" item.id " 就可以使用了 ,然后在给他赋予了属性 @change 后可以对点击做出反应;
有了反应后我们可以对他进行计算先为他添加语句,
然后我们看看控制台的,回应数组;
选择一个他就会输出 一个 Array(1) 两个就是 Array(2) 之后以此类推;上面我们给他写了一个 <view>共选择 {{count}} 个产品,共计 元</view> 我们给他们添加值的时候就需要重新写一个数组并给他赋值;
也可以写个变量 :
const numCount = computed(()=>arr2.value.length);在到上面修改为 {{numCount}}
我们想要计算总数时,需要为他在添加一个数组属性,告诉他,他有没有被选择上;
在编写点击后的赋值就好了
通过这个代码就可以实现点击后计算了