Vue computed自动计算对象中的属性_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-item
        label="总建筑面积(㎡)："
        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>