Vue.js如何不使用自定义方法将输入框值同步绑定到多个data属性

方案1：计算属性get/set实现（无额外自定义方法） #

该方案依赖Vue原生计算属性的读写能力实现，无需在methods中定义任何额外方法：

<template>
  <!-- 直接绑定计算属性即可 -->
  <input type="text" v-model="transferAmount" />
</template>

<script>
export default {
  data() {
    return {
      money_transfer: {
        amount: '', 
        source_amount: '', 
        target_amount: '', 
      }
    }
  },
  computed: {
    transferAmount: {
      // getter返回当前绑定的原值
      get() {
        return this.money_transfer.amount
      },
      // setter触发时同步给三个属性
      set(inputVal) {
        this.money_transfer.amount = inputVal
        this.money_transfer.source_amount = inputVal
        this.money_transfer.target_amount = inputVal
      }
    }
  }
}
</script>

该方案逻辑内聚在计算属性中，模板写法和普通v-model完全一致，后续维护成本低。

方案2：模板内直接绑定input事件实现（无额外逻辑代码） #

如果不想新增计算属性，可以直接在模板的输入事件中完成多属性赋值，不需要在script中写任何额外业务逻辑：

<input 
  type="text" 
  :value="money_transfer.amount" 
  @input="money_transfer.amount = money_transfer.source_amount = money_transfer.target_amount = $event.target.value"
/>

该方案代码极简，所有逻辑都在模板内完成，适合简单的一次性赋值场景。

内容的提问来源于stack exchange，提问作者Selaminko Elam