uni-app的计算属性

计算属性,也就是使用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}}

我们想要计算总数时,需要为他在添加一个数组属性,告诉他,他有没有被选择上;

在编写点击后的赋值就好了

通过这个代码就可以实现点击后计算了