Vue computed自动计算对象中的属性

需求

总建筑面积 = 地上总建筑面积 + 地下总建筑面积

总建筑面积禁止用户输入，而由用户输入的 “地上总建筑面积” 和 “地下总建筑面积” 自动求和得到

实现思路

用 computed自动计算总建筑面积

存在问题

computed无法直接监听对象中的属性（在 computed中声明的变量，不能在data中重复定义）

解决方案

computed中新定义一个变量zjzmj【其实变量名是啥不重要】，在其中写入自动计算的逻辑即可，实现自动监听 this.formData.dsmj和this.formData.dxmj的变化

computed: {'zjzmj'(){this.formData.zjzmj = this.sum(this.formData.dsmj, this.formData.dxmj)}}
},

此处的新变量zjzmj（在computed中使用后，不能在data中重复定义）

表单数据存在 formData对象中，formData对象内有三个属性：

地上建筑面积 dsmj
地下建筑面积 dxmj
总建筑面积 zjzmj

this.sum为全局求和函数

    //全局函数4——两个浮点数精确求和Vue.prototype.sum = function (num1,num2){var r1,r2,m;try{r1 = num1.toString().split('.')[1].length;}catch(e){r1 = 0;}try{r2=num2.toString().split(".")[1].length;}catch(e){r2=0;}m=Math.pow(10,Math.max(r1,r2));return Math.round(num1*m+num2*m)/m;}

表单核心代码

<el-form-itemlabel="总建筑面积(㎡)："prop="zjzmj":rules="[ { required: true, message: '请输入'}]"
><el-input-number :disabled="true" :controls="false" :precision="2" :min="0" v-model="formData.zjzmj"></el-input-number>
</el-form-item>

Vue computed自动计算对象中的属性相关推荐

Java：比较两个对象中全部属性值是否相等
点击关注公众号,实用技术文章及时了解来源:xiaoer.blog.csdn.net/article/details/85005295 例如下述Java类: import java.io.Serial ...
JS基础 -- 枚举对象中的属性
/** 什么事枚举对象中的属性?* 下面以一个例子来慢慢解释*///创建一个对象var obj = {name: '唐一彩',age: 4000,gender: '男',address: '白马寺'} ...
实例对象的属性和原型对象中的属性重名问题神奇的原型链继承继承案例
实例对象的属性和原型对象中的属性重名问题 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
spring -mvc 将对象封装json返回时删除掉对象中的属性注解方式
spring -mvc 将对象封装json返回时删除掉对象中的属性注解方式在类名,接口头上注解使用在 @JsonIgnoreProperties(value={"comid" ...
python封装：隐藏对象中的属性或方法（三分钟读懂）
封装:隐藏对象中的属性或方法隐藏对象中的属性隐藏:- 将对象的属性名,修改为一个外部不知道的名字我们使用时,有特殊方法来处理获取(修改)对象中的属性获取(修改)对象中的属性需要提供一个get ...
按自己的需要获取对象中的属性
先定义一个数组,将需要获取的属性定义好,然后使用as keyof 获取对象的key类型,这样就可以用数组的形式来获取对象中的属性,这样就可以用v-for来进行遍历,精简代码.
对象、对象的属性、对象字面量、枚举对象中的属性、可变类型、变量和对象——JS对象
目录一.对象二.对象的属性三.对象字面量四.枚举对象中的属性五.可变类型六.变量和对象数据类型: 原始值:(不可变类型) 1.数值 Number 2.大整数 BigInt 3.字符串 S ...
js给对象添加变量属性 js 更改对象中的属性名数组对象中每个对象添加一个字段-map用法和forEarch用法
js给对象添加变量属性 & js 更改对象中的属性名 & 数组对象中每个对象添加一个字段-map用法和forEarch用法 1.js给对象添加变量属性 1.js创建一个对象或者在原有对 ...
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...

Vue computed自动计算对象中的属性

Vue computed自动计算对象中的属性相关推荐

最新文章

热门文章