在Vue.js中获取当前输入框的值，主要有两种常用方式，一是使用v-model指令实现双向数据绑定，将输入框的值与data中的数据关联，通过this.数据名即可实时获取当前值，适用于表单数据绑定场景，二是通过ref属性引用DOM元素，在代码中通过this.$refs.引用名.value获取输入框的值，适用于需要直接操作DOM或动态获取值的场景，v-model更为便捷，推荐在表单数据交互中使用，而ref`则在需要直接访问DOM元素时更灵活。
Vue.js 获取当前输入框值的完整指南：从基础到实践
在 Vue.js 开发过程中，获取输入框的值是一项基础且频繁的操作，无论是构建复杂的表单系统、实现实时数据校验，还是开发动态交互功能，都离不开对输入值的精确处理，本文将从基础概念到高级应用，全面剖析 Vue.js 中获取输入框值的多种技术方案，并结合实际场景提供代码示例和最佳实践,助您在开发中游刃有余。
基础方法：v-model 双向绑定——Vue 推荐的标准方案
v-model 是 Vue.js 框架提供的核心语法糖，专门用于表单控件的双向数据绑定，它巧妙地将 v-bind:value 和 v-on:input 指令融合在一起，实现了数据与视图的完美同步，这种设计不仅简化了代码结构，更体现了 Vue 数据驱动视图的核心理念,是处理输入框值的首选方式。
核心工作原理
-
数据流向视图：通过
v-bind:value指令，将组件data属性中的数据动态绑定到输入框的value属性,确保初始值正确显示。 -
视图流向数据：通过
v-on:input指令监听输入框的input事件，当用户进行输入操作时，自动触发事件处理函数，将输入框的最新值同步回组件的data中。
实战代码示例
<template>
<div class="input-container">
<!-- 使用 v-model 实现双向绑定 -->
<input
type="text"
v-model="inputValue"
placeholder="请输入内容"
class="form-input"
>
<p class="display-text">当前输入值：{{ inputValue }}</p>
<button @click="handleSubmit" class="submit-btn">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '' // 初始值为空字符串
}
},
methods: {
handleSubmit() {
// 提交时直接使用 data 中的 inputValue
console.log('提交的值：', this.inputValue);
this.showSuccessMessage(`提交成功：${this.inputValue}`);
},
showSuccessMessage(message) {
// 这里可以添加更复杂的提示逻辑
alert(message);
}
}
}
</script>
<style scoped>
.input-container {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #eee;
border-radius: 8px;
}
.form-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.display-text {
margin-bottom: 15px;
color: #666;
}
.submit-btn {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #3aa876;
}
</style>
最佳应用场景
- 表单数据收集：登录表单、注册表单、搜索框等需要用户输入的场景
- 实时数据同步：如搜索框的联想提示、输入字数统计、实时预览等功能
- 复杂表单验证：结合计算属性或方法实现实时表单校验
进阶方法：通过 ref 获取 DOM 元素——灵活处理特殊场景
当输入框的值不需要实时响应到数据层，或者需要在特定时机（如点击按钮后）获取值时，ref 属性提供了一种直接操作 DOM 的方式，这种方法特别适用于动态生成或第三方 UI 组件的场景。
核心实现原理
-
ref属性注册：通过ref属性为 DOM 元素或子组件注册引用信息，Vue 会在组件渲染完成后将对应的 DOM 元素存储在$refs对象中。 -
DOM 元素访问：通过
this.$refs.refName可以直接访问对应的 DOM 元素，进而读取其value属性获取当前输入值。
代码实现示例
<template>
<div class="ref-example">
<!-- 使用 ref 标记输入框 -->
<input
type="text"
ref="inputRef"
placeholder="点击按钮获取值"
class="form-input"
>
<button @click="getValue" class="action-btn">获取当前值</button>
<p class="result-text">获取的值：{{ currentValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
currentValue: '' // 用于存储获取的值
}
},
methods: {
getValue() {
// 通过 $refs 访问 DOM 元素，获取 value
const inputElement = this.$refs.inputRef;
const value = inputElement ? inputElement.value : '';
this.currentValue = value;
console.log('当前输入值：', value);
// 可以在这里添加额外的处理逻辑
if (value.trim()) {
this.processInput(value);
}
},
processInput(value) {
// 处理输入值的示例方法
console.log('处理输入值：', value);
}
}
}
</script>
典型应用场景
- 批量数据提交：在表单中不需要实时验证，而是在用户点击提交按钮时统一获取所有输入值
- 动态表单元素：通过
v-for动态生成的输入框集合，需要通过ref数组或索引访问 - 第三方组件集成：如 Element UI 的
el-input、Ant Design Vue 的Input等组件，需通过组件实例获取值 - 非受控组件：某些特殊场景下，不希望数据与视图实时绑定，而是手动控制数据流
事件监听：通过 @input 或 @change 手动获取——定制化处理逻辑
当获取输入值的同时需要执行额外的业务逻辑（如输入校验、防抖处理、格式转换等），直接监听输入框的 input 或 change 事件是一种灵活的解决方案。
事件特性对比
| 事件类型 | 触发时机 | 适用场景 | 性能影响 |
|---|---|---|---|
@input |
每次输入值变化时触发 | 实时校验、搜索联想、字数统计 | 较高，频繁触发 |
@change |
失去焦点且值变化时触发 | 最终值提交、一次性验证 | 较低，触发次数少 |
实战代码示例
<template>
<div class="event-listener-example">
<input
type="text"
@input="handleInput"
@change="handleChange"
placeholder="输入内容体验不同事件"
class="form-input"
>
<div class="event-info">
<p>输入事件触发次数：<span class="highlight">{{ inputCount }}</span></p>
<p>最后输入值：<span class="highlight">{{ lastInputValue }}</span></p>
<p>变更事件触发值：<span class="highlight">{{ changeValue }}</span></p>
</div>
<div class="validation-message" v-if="validationMessage">
{{ validationMessage }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputCount: 0,
lastInputValue: '',
changeValue: '',
validationMessage: '',
