提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 方法1
- 方法2
- 结论
前言
写项目的时候,遇到需要在动态表单中,将同一级输入框输入的内容计算出来,并动态显示,发现computer计算属性好像不能带参数,最后查了好多文档才解决,看下面简单案例
方法1
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现。例如计算出每一组A输入框中的值+B输入框中的值并动态显示在C输入框中
<template><div id="app"><el-form ref="form" :model="form" label-width="80px"><div class="box" v-for="(item,index) in list" :key="index"><el-form-item label="A"><el-input v-model="item.A"></el-input></el-form-item><el-form-item label="B"><el-input v-model="item.B"></el-input></el-form-item><el-form-item label="C"><el-input :value="ab(index,item.A,item.B)"></el-input></el-form-item></div></el-form></div>
</template><script>
export default {computed: {ab() {return function (index, val1, val2) {// 除以1,是为了强制转换成number类型let val3 = val1 / 1 + val2 / 1this.list[index].C = this.js(val3)return this.list[index].C}}},data() {return {list: [{A: null,B: null,C: null},{A: null,B: null,C: null}]}},methods: {// 四舍五入保留两位小数js(val) {return (Math.round(val * 100) / 100).toFixed(2)}}
}
</script>
方法2
也可以直接写成methods里的方法,但是不推荐使用methods(没有缓存),具体为啥可以看看vue官网method和computed的区别
<template><div id="app"><el-form ref="form" :model="form" label-width="80px"><div class="box" v-for="(item,index) in list" :key="index"><el-form-item label="A"><el-input v-model="item.A" @change="ab(index)"></el-input></el-form-item><el-form-item label="B"><el-input v-model="item.B" @change="ab(index)"></el-input></el-form-item><el-form-item label="C"><el-input :value="item.C"></el-input></el-form-item></div></el-form></div>
</template><script>
export default {data() {return {list: [{A: null,B: null,C: null},{A: null,B: null,C: null}]}},methods: {// 四舍五入保留两位小数js(val) {return (Math.round(val * 100) / 100).toFixed(2)},ab(index){let val3 = this.list[index].A/1 + this.list[index].B/1this.list[index].C = this.js(val3)return this.list[index].C}}
}
结论
个人感觉还是第一种用的爽