Vue.js中获取元素三种方法·模板引用是一种在·对于简单场景可以使用ref

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

在Vue.js中，我们可以通过以下三种主要方法来获取元素的值：

模板引用是一种在Vue中获取DOM元素或子组件的方式。通过在元素上添加属性，并在Vue实例中访问，可以轻松获取元素的值。

示例代码：

<input ref="inputRef" v-model="inputValue">

然后在方法中，通过`this.$refs.inputRef.value`获取输入框的值。

v-model是Vue中用于双向数据绑定的指令。通过将表单元素与数据属性绑定，可以非常方便地获取和更新元素的值。

示例代码：

<input :value="inputValue" @input="inputValue = $event.target.value">

通过这种方式，可以直接访问输入框的值。

在事件处理函数中，通过事件对象可以获取触发事件的元素，并访问其值。

示例代码：

<input @input="handleInput">

然后在方法中，通过`event.target.value`获取输入框的值。

在实际项目中，可能需要结合使用多种方法来获取元素值。以下是一个综合实例，展示如何在一个表单中使用ref、v-model和事件处理函数。

示例代码：

<form @submit.prevent="submitForm">

  <input ref="inputRef" v-model="inputValue" type="text">

  <button type="submit">Submit</button>

</form>

在这个示例中，表单中不同的输入元素使用了不同的方法来获取其值，并在提交表单时输出所有值。

在Vue.js中，可以通过模板引用（ref）、v-model绑定数据和事件处理函数三种主要方法来获取元素的值。每种方法都有其优缺点，适用于不同的场景。通过结合使用这些方法，可以更灵活和高效地处理表单和用户输入。