Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算

需求：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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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><divv-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-inputv-model="zhengji"disabledtype="number"name="正计"></el-input></el-form-item></el-col><el-col :span="7"><el-form-item label="答计:" label-width="50px"><el-inputv-model="daji"type="number"disabledname="答计"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item label="总计:" label-width="50px"><el-inputv-model="sumZongji"type="number"disabledname="总计"></el-input></el-form-item></el-col></el-row>

Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算相关推荐

vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
vue中computed的详细讲解
vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...
深究vue中computed顺序、watch顺序、响应次数
文章目录前言深究步骤 1.代码 2.输出结果 3.分析过程总结前言深究vue中computed顺序.watch顺序.响应次数深究步骤 1.代码 <template><di ...
VUE中computed 、created 、mounted 的先后顺序
VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
Vue 中 computed ,watch,methods 的异同
methods,watch和computed都是以函数为基础的. computed 和 watch 都可以观察页面的相应式数据的变化.当处理页面的数据变化时,我们有时候很容易滥用watch, 而通常更 ...
Vue中computed 计算机属性、getter、setter
计算属性在模板表达式中放入太多逻辑时,会让模板重且难以维护.比如: // 错误示例 <div id="example">{{ message.split('').re ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...

Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算

需求：computed计算属性的应用一般会是几个互不影响的值计算，本次需求是多个值互相引用计算

完整代码：

Vue中computed多个值互相计算，Vue多个字段之间互相计算，vue多个值互相引用计算相关推荐

最新文章

热门文章