需求：computed计算属性的应用一般会是几个互不影响的值计算，本次需求是多个值互相引用计算
效果图
注：computed多个值单独已用计算时，会报错，Vue computed 报错：Computed property was assigned to but it has no setter 解决办法就是 换一种写法，组件中定义的computed属性缺少setter,使用过computed 都应该知道，该错误提示通常发生在组件内为computed属性赋值的时候，如果没有显示的声明setter，控制台则会打印如上错误。那么顺着这个方向，继续排查错误,其次检查代码中是否有给num进行赋值，第一次检查，好像整个代码逻辑从未操作过num属性，怎么会涉及到给num赋值呢？ 不管怎么疑惑，错误的确发生了。继续定位对num属性的操作，直到我看到v-model=“num”。现在一切都解释得通了，正是v-model的双向绑定属性实现了对num 的赋值。解决办法通过上面的分析，错误及原因已经找到，怎么解决就比较简单了，只需在声明computed属性时显示的声明setter即可。
这种错误解决办法:https://blog.csdn.net/weixin_44670973/article/details/109074967
sumZongji() {
return (
Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
)
},
完整代码：
data(){
return{
params: {
jiaozhong: '',
radio: '原稿',
booknames: '',
jiaozhong: '',
daji: '',
},
}
}
//计算属性
computed:{
sumZongji() {
return (
Number(this.params.datizhi) + Number(this.zhengji) + Number(this.daji)
)
},
zhengji: {
get() {
return (
parseFloat(this.params.zhengzhong) +
1 -
parseFloat(this.params.zhengshi)
)
},
set(s) {},
},
daji: {
get() {
return (
parseFloat(this.params.dazhong) + 1 - parseFloat(this.params.dashi)
)
},
set(v) {},
},
}
//页面Dom
<el-row>
<el-col :span="12">
<el-form-item label="正始:">
<el-input
v-model="params.zhengshi"
name="正始"
type="number"
placeholder="请输入"
min="1"
max="1000"
oninput="value=value.replace(/[^\d]/g,0)"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="正终:">
<el-input
v-model="params.zhengzhong"
name="正终"
placeholder="请输入"
type="number"
min="1"
max="1000"
oninput="value=value.replace(/[^\d]/g,0)"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="答始:">
<el-input
v-model="params.dashi"
name="答始"
placeholder="请输入"
type="number"
min="1"
max="1000"
oninput="value=value.replace(/[^\d]/g,0)"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="答终:">
<el-input
v-model="params.dazhong"
name="答终"
placeholder="请输入"
type="number"
min="1"
max="1000"
oninput="value=value.replace(/[^\d]/g,0)"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="答题纸:">
<el-input
v-model="params.datizhi"
name="答题纸"
placeholder="请输入"
type="number"
min="1"
max="1000"
oninput="value=value.replace(/[^\d]/g,0)"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div
v-if="
params.jiaozhong != '核红' &&
params.jiaozhong != '其他' &&
params.jiaozhong != '分项检查'
"
class="yeshu"
>
<el-row>
<el-col :span="24">
<el-form-item label="页数:"></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-form-item label="正计:">
<el-input
v-model="zhengji"
disabled
type="number"
name="正计"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="答计:" label-width="50px">
<el-input
v-model="daji"
type="number"
disabled
name="答计"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="总计:" label-width="50px">
<el-input
v-model="sumZongji"
type="number"
disabled
name="总计"
></el-input>
</el-form-item>
</el-col>
</el-row>
