在 Vue3 中获取 input 输入框的值，主要的几种方式

在 Vue3 中获取 input 输入框的值主要有以下几种方式：

---

方法 1: 使用 v-model 双向绑定（推荐）

通过响应式数据绑定直接获取值，这是最简洁的方式。

<template>
  <input type="text" v-model="inputValue" />
  <button @click="getValue">获取值</button>
</template>

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

// 定义响应式变量
const inputValue = ref('');

const getValue = () => {
  console.log(inputValue.value); // 直接访问绑定的值
};
</script>

---

方法 2: 通过事件对象手动获取

监听输入事件（如 input 或 change），通过事件对象获取值。

<template>
  <input type="text" @input="handleInput" />
  <p>当前值: {{ manualValue }}</p>
</template>

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

const manualValue = ref('');

const handleInput = (event) => {
  manualValue.value = event.target.value; // 通过事件对象获取值
};
</script>

---

方法 3: 使用 ref 引用 DOM 元素

直接操作 DOM 元素获取值（适用于需要手动控制的场景）。

<template>
  <input type="text" ref="inputRef" />
  <button @click="getRefValue">通过 Ref 获取值</button>
</template>

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

const inputRef = ref(null); // 创建 ref 引用

const getRefValue = () => {
  console.log(inputRef.value?.value); // 通过 DOM 元素的 value 属性获取值
};
</script>

---

方法 4: 表单提交时获取值

适用于表单提交场景，通过事件对象或绑定数据获取值。

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData.username" />
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

const formData = reactive({
  username: ''
});

const handleSubmit = () => {
  console.log('提交的值:', formData.username);
};
</script>

---

关键区别

方法	适用场景	特点
v-model	实时数据绑定	简洁、响应式，推荐大多数情况
事件对象	需要处理输入过程	灵活，可自定义逻辑
ref 引用	需要直接操作 DOM（如第三方库集成）	直接访问 DOM，但破坏响应式特性
表单提交	表单整体提交	结合 v-model 使用更高效

---

最佳实践

• 优先使用 v-model：符合 Vue 的响应式设计，代码简洁。
• 需要实时验证或处理输入过程时，结合 @input 事件。
• 避免过度依赖 ref 直接操作 DOM，除非必要（如焦点控制）。

通过上述方法，你可以灵活地在 Vue3 中获取输入框的值！