同一个表单中，如何可以让其中一个输入框的值自动计算等于其他输入框值之和？

最新推荐文章于 2024-08-13 10:25:16 发布

小倪有点菜

最新推荐文章于 2024-08-13 10:25:16 发布

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ni15534789894/article/details/118405900

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了如何在 Vue.js 应用中利用 computed 属性进行数据计算。通过声明 data 中的变量，如总人口、不同安置人口等，然后在 computed 中定义 sum 方法，避免非数字值导致的 NaN 错误，实现人口总数的动态计算。最后，将计算结果双向绑定到页面的输入框展示，确保用户可以查看到实时的总人口数。

摘要由CSDN通过智能技术生成

实际场景：

在这里插入图片描述

需要用到vue中computed计算属性

首先在data中声明三个变量分别代表输入框中的这几个数据

1、【
		这是data中声明的变量
        totalPopulation: undefined, // 总人口
        placementShift: '', // 水深小于等于0.5m及非淹没区就地安置人口
        placementMax: '', // 水深大于0.5m就地安置人口
        placementSmall: ''// 水深大于0.5m转移安置转移人口
】
2、【
	声明之后我们就可以使用computed计算属性来进行计算了
	  computed: {
    // 总人口之和
    sum() {
      if (this.floodData.placementShift === '' && this.floodData.placementMax === '' && this.floodData.placementSmall === '') {
        return 0
      } else {
        return Number(this.floodData.placementShift) + Number(this.floodData.placementMax) + Number(this.floodData.placementSmall)
      }
    }
  },
  这里的判断是为了防止不是数字是返回的是NAN，else中强制将其输入的内容转为数字，这样可以进行累加
】
3、
<el-col :sm="12" :offset="0">
	<el-form-item class="search-param-label" label="总人口">
		<el-input v-model="sum" clearable placeholder="请输入总人口" disabled class="search-param-item" />
	</el-form-item>
</el-col>
然后将computed中的sum双向绑定到需要用到的地方即可