Vue.js中v-model绑定值初始赋值且可修改的实现方案咨询

嘿，这个场景下**计算属性（computed）**是最优解！它的get/set方法刚好能满足「初始值关联roundFee + 允许输入更新changedPrice.c1」的双向绑定需求，而@change更适合处理输入完成后的触发动作，不是这类双向绑定场景的首选。

下面是完整的实现代码：

<script>
export default {
  data() {
    return {
      roundFee: 5000,
      changedPrice: { c1: 0, c2: 0 }
    }
  },
  computed: {
    c1InputValue: {
      // 初始显示逻辑：如果changedPrice.c1还是默认值0，就用roundFee的5000；否则用已修改的数值
      get() {
        return this.changedPrice.c1 === 0 ? this.roundFee : this.changedPrice.c1
      },
      // 用户输入新值时，同步更新changedPrice.c1
      set(newValue) {
        // 可选：把输入的文本转成数字，避免changedPrice.c1变成字符串类型
        this.changedPrice.c1 = Number(newValue) || 0
      }
    }
  }
}
</script>

<template>
  <input type="text" class="form-control" disabled v-model="roundFee"> $
  <!-- 将输入框的v-model绑定到计算属性 -->
  <input type="text" class="form-control" v-model="c1InputValue">
</template>

逻辑说明： #

• get方法：组件初始化时，changedPrice.c1是默认的0，因此会返回roundFee的5000，让输入框初始显示这个值；如果用户后续修改过输入框，changedPrice.c1已有非0值，就返回修改后的数值。
• set方法：用户在输入框输入新内容时，会触发set方法，把输入值同步更新到changedPrice.c1中，保证数据一致性。
• 可选的数值转换：因为输入框是type="text"，可以在set方法里把输入值转为数字，避免changedPrice.c1变成字符串类型，你可以根据业务需求决定是否保留这部分逻辑。

为什么不用@change？ #

如果用@change实现，你需要先在created钩子给changedPrice.c1赋值roundFee，再监听输入框的change事件去更新changedPrice.c1，代码会更繁琐，而且无法直接利用v-model的双向绑定语法，不如computed简洁优雅，也更贴合Vue的响应式设计思路。

内容的提问来源于stack exchange，提问作者Aiden Kim