uniapp可视化计算

uniapp可视化计算通过输入两个数字自动计算结果。

输入字段

首先我们要先拖入两个文本输入组件,分别为价格和数量两个字段,分别定义为price、num两个标识

显示合计

拖入文本内容字段,开启 文本变量、变量标识为total。这里通过自定义方法来计算price*num积

方法一:自定义方法计算总价

自定义方法实现total=price*num。这里由于我们用表单组件把两个输入组件装起来了所以字段标识会变成form.price,form.num。所以我们在自定义方法里实现是用this.total=this.form.price*this.form.num.

输入自动计算

如希望输入后,总数自动计算,需要在输入组件时输入时触发上面的自动计算总价。

方法二:自动计算总价

只需要文本内容上绑定计算,程序也会自动执行,但可能会因为输入不合法有不确定性的错误。

如果确保你的公式及输入准确性可以用方法二,如果不确定准确性建议用方法一。因为逻辑时可以处理很多自己数据加工规则。