在Vue.js中获值的两种方法·中获取·这样我们就可以直接访问到这个input元素并读取它的值
作者：编程小白 |
发布时间：2025-07-03 |
在Vue.js中获取input值的两种方法
在Vue.js中，我们可以通过两种方法来获取input的值：使用v-model进行双向绑定和使用ref获取DOM元素并读取其值。下面我会用更通俗的方式介绍一下这两种方法。
---
使用v-model进行双向绑定
这种方法是最简单直接的方式，就像一对恋人一样，数据与输入框的值会相互了解，同步变化。
步骤：
1. 在Vue实例里定义一个变量，比如叫`inputValue`，用来存放input的值。
2. 在模板里，用`v-model`指令把input框的值和这个变量绑定起来。
示例：
```html
```
解释：
用户在input里输入什么，`inputValue`就会跟着变，而且input框也会实时显示这个值。
---
使用ref获取DOM元素并读取其值
这种方法就像是直接去查看input的个人信息，比较灵活，适合需要动态获取input值的场景。
步骤：
1. 在input上加上一个`ref`属性，比如`ref="inputElement"`。
2. 在Vue实例的方法里，通过`this.$refs.inputElement.value`来获取input的值。
示例：
```html
```
```javascript
// 在Vue实例的方法中
methods: {
getInputValue() {
return this.$refs.inputElement.value;
}
}
```
解释：
给input添加了`ref`，Vue会把这个元素存储在`this.$refs`里。这样我们就可以直接访问到这个input元素，并读取它的值。
---
两种方法的比较
| 方法 | 优点 | 缺点 | 适用场景 |
| ------------ | ------------------------------------- | ----------------------------------------- | ---------------------------------------------- |
| v-model | 简洁、直观，实现数据双向绑定 | 对复杂场景支持不足，灵活性较低 | 常规表单处理，数据绑定 |
| ref | 灵活，可在方法中动态获取和操作DOM元素 | 代码较复杂，需要手动管理数据同步 | 特殊事件处理，DOM操作需求较高 |
---
实际应用中的注意事项
* v-model的使用场景： 当你需要实现简单的表单处理和数据绑定时，优先考虑使用。支持多种表单元素，如input、select等，使用时需注意其默认行为。
* ref的使用场景： 当你需要在特定事件中动态获取输入框值或操作DOM元素时，考虑使用。在复杂表单或动态表单处理时，可以提供更高的灵活性和控制力。
* 混合使用： 在某些情况下，可以混合使用v-model和ref，例如在表单初始化时使用v-model，在特定事件处理中使用ref。
---
总结来说，根据具体需求选择合适的方法，可以让你的Vue.js开发更加高效和灵活。