Vue2中获取文本值的多种方式中获取和设置文本值在大多数情况下使用v-model指令是最简洁高效的方式
作者：机器人技术佬 |
发布时间：2025-06-20 |
Vue2中获取文本值的多种方式
在Vue2中，获取文本值的方法有很多，以下将详细介绍三种常见的方法。
1. 使用v-model指令
v-model 是Vue中最常用的指令之一，它能够实现双向数据绑定，让数据和视图同步更新。使用v-model特别适合在表单控件（如input、textarea等）中获取和设置文本值。
示例代码：
```html
```
解释：
这里，`v-model` 将input控件的值和Vue实例的`message`数据属性绑定在一起。用户在input中输入内容时，`message`的值会实时更新，并在页面上显示。
2. 使用ref属性
ref 属性允许我们在Vue组件中直接访问DOM元素或子组件实例。通过ref，我们可以获取指定元素的引用，进而访问其属性和方法。
示例代码：
```html
```
解释：
这里，input通过ref属性绑定了`inputRef`。在`getInputValue`方法中，我们通过`this.$refs.inputRef.value`获取input控件的文本值，并将其赋值给`inputValue`属性。
3. 通过事件绑定获取
在Vue2中，我们可以通过事件绑定来获取用户输入的文本值。例如，通过`@input`事件，我们可以在用户输入时实时获取文本值，并将其存储在组件的data中。
示例代码：
```html
```
解释：
这里，input绑定了`@input`事件，并在事件处理函数`updateMessage`中通过`event.target.value`获取用户输入的文本值，将其赋值给`message`属性。
比较和选择最佳方式
| 方式 | 优点 | 缺点 | 适用场景 |
| --- | --- | --- | --- |
| v-model指令 | 简洁高效，实现双向数据绑定 | 仅适用于表单控件 | 大部分表单控件 |
| ref属性 | 直接访问DOM元素或子组件实例，可以灵活操作 | 需要手动获取文本值，并且代码略显冗长 | 需要在特定事件中获取文本值的场景 |
| 事件绑定 | 通过事件处理函数可以实时获取文本值，并进行相应处理 | 需要手动编写事件处理函数，代码略显复杂 | 需要对用户输入进行实时处理的场景 |
总结
在Vue2中获取文本值的方式多种多样，开发者可以根据具体需求和应用场景选择合适的方式。在大多数情况下，使用v-model指令是最简洁高效的方式。