Vue2 一个input框统计其他几个input框的总和

在Vue2中，要实现一个input框统计其他几个input框的总和，通常会使用Vue的响应式数据绑定和计算属性。以下是一个简单的示例代码：

<template>
  <div>
    <input v-model.number="value1" type="number" placeholder="输入1" />
    <input v-model.number="value2" type="number" placeholder="输入2" />
    <input v-model.number="value3" type="number" placeholder="输入3" />
    <input v-model="totalSum" type="number" placeholder="总和" readonly />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      totalSum: 0
    };
  },
  watch: {
    // 当value1、value2或value3变化时，更新总和
    value1() {
      this.totalSum = this.value1 + this.value2 + this.value3;
    },
    value2() {
      this.totalSum = this.value1 + this.value2 + this.value3;
    },
    value3() {
      this.totalSum = this.value1 + this.value2 + this.value3;
    }
  },
  mounted() {
    // 组件加载完成后，初始化总和
    this.totalSum = this.value1 + this.value2 + this.value3;
  }
};
</script>

在这个示例中，`value1`、`value2`和`value3`是三个独立的input框绑定的值，它们都通过`v-model`指令与Vue实例的data属性绑定。`totalSum`是用来显示总和的input框，其值通过计算各个输入值的和来动态计算。

为了实现这一功能，我们在Vue实例中使用了`watch`属性来监听`value1`、`value2`和`value3`的变化。每当这些值之一发生变化时，`watch`中的方法就会执行，重新计算`totalSum`的值。同时，在`mounted`生命周期钩子中，我们对`totalSum`进行了初始化设置，以确保在页面加载时总和是正确的。