Vue中获取HTM元素值的方法就像是如何在Vue中获取选中的复选框的值

作者：机器人技术佬 | 发布时间：2025-06-30 |

Vue中获取HTML元素值的方法

获取HTML元素的值在Vue中其实很简单，主要方法有三种，下面我会用更通俗的方式给你介绍。

一、使用v-model双向绑定

v-model就像是Vue的语法糖，它让表单元素和Vue实例中的数据直接绑定起来。简单来说，就是表单元素的变化能直接影响到Vue实例中的数据，反之亦然。

比如，你有一个文本框，你想让它和Vue实例中的某个变量同步，你就可以这样用：

```html ``` 这样，你输入的内容会自动更新到Vue实例的`message`变量里，反过来，`message`的任何变化也会实时反映到文本框中。

二、使用ref属性

ref就像是一个标签，你可以在模板中的元素或组件上加上它，然后在Vue实例中通过这个标签名来访问这个元素或组件。

比如，你有一个文本框，你想通过ref来获取它的值，可以这样写：

```html ``` 然后在Vue实例的方法中，你可以这样获取它的值： ```javascript methods: { focusInput() { this.$refs.myInput.focus(); } } ``` 这样，你就可以通过`this.$refs.myInput`来访问这个文本框了。

三、使用原生JavaScript方法

如果你不想用Vue的语法，也可以直接使用原生的JavaScript方法来获取HTML元素的值，比如使用`document.querySelector`。

比如，你想获取一个文本框的值，可以这样写：

```javascript const inputElement = document.querySelector('input'); const inputValue = inputElement.value; ``` 这个方法非常灵活，可以用来获取任何HTML元素的值。

四、比较不同方法的优劣

| 方法 | 优点 | 缺点 | |------------|------------------------------|----------------------------------------| | v-model | 简洁易用，适合表单控件 | 仅适用于表单控件，不能灵活应用于所有HTML元素 | | ref属性 | 灵活，可以应用于任何HTML元素 | 需要在模板中添加ref属性，代码量略有增加 | | 原生JavaScript方法 | 灵活，可以应用于任何HTML元素 | 代码较为冗长，不符合Vue的设计理念 |

五、总结和建议

选择哪种方法取决于你的具体需求。如果只是处理表单控件，推荐使用v-model；如果需要更灵活地处理元素或子组件，可以使用ref属性；而在特殊情况下，也可以使用原生JavaScript方法。

建议：

优先使用v-model：表单控件用v-model最方便。
使用ref属性：需要获取非表单控件的值或引用子组件时，ref属性更灵活。
谨慎使用原生JavaScript方法：除非必要，否则尽量保持Vue的简洁性。