如何在Vue中实现对<input>元素内容的完全控制？

你遇到的问题根源在于：React的受控组件会让<input>的value完全由state驱动，只有更新state才会改变输入框的显示值；而Vue中单纯使用:value是单向绑定，用户输入会直接修改DOM的value，不会自动和响应式变量同步，导致两者不一致。

要实现和React一致的完全控制效果，你需要在输入事件中强制同步DOM值与响应式变量，具体代码如下：

<script setup>
import { ref } from "vue";

const value = ref("");

const onSubmit = () => {
  // 在这里处理提交逻辑，比如使用value.value
};

const onInput = (event) => {
  const inputValue = event.target.value;
  // 示例：只允许输入大写字母
  if (inputValue === inputValue.toUpperCase()) {
    value.value = inputValue;
  } else {
    // 当输入不符合规则时，强制将DOM值同步回响应式变量的当前值
    event.target.value = value.value;
  }
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input @input="onInput" :value="value" />
    <button type="submit">Submit</button>
  </form>
</template>

另一种更贴合Vue习惯的方式是利用v-model的语法糖，结合输入拦截：因为v-model本质是:value + @input的封装，我们可以在@input事件中修正输入内容，确保响应式变量和DOM值一致：

<script setup>
import { ref } from "vue";

const value = ref("");

const onSubmit = () => {
  // 处理提交逻辑
};

const onInput = () => {
  // 自动将输入转换为大写，实现强制控制
  value.value = value.value.toUpperCase();
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="value" @input="onInput" />
    <button type="submit">Submit</button>
  </form>
</template>

这种方式下，用户输入的内容会被自动转换为大写，既保证了响应式变量和DOM值一致，也实现了内容控制的需求。

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