vue怎么获取value

百变鹏仔 3周前 (09-25) #VUE

文章标签 vue

如何获取vue中输入框的值？1.使用双向绑定指令v-model；2.使用$refs对象和value属性；3.直接访问.value属性。

如何在 Vue 中获取输入框的值

Vue.js 中有几种方法可以获取输入框的值：

一、使用 v-model

v-model 指令是一种双向绑定指令，用于同步表单输入和 Vue 数据模型。要使用 v-model，只需在输入元素上添加 v-model="dataModel" 属性即可。比如：

立即学习“前端免费学习笔记（深入）”；

<input type="text" v-model="username">

此时，可以从 Vue 实例中获取输入框的值：

console.log(this.username); // 输出输入框的内容

二、使用 $refs

$refs 对象提供了对组件实例的引用，包括表单元素。可以通过 $refs.inputName 访问输入框元素，并获取其 value 属性。比如：

<input type="text" ref="usernameInput">

console.log(this.$refs.usernameInput.value); // 输出输入框的内容

三、使用 .value

直接访问输入框元素的 .value 属性也可以获取其值。比如：

<input type="text" id="usernameInput">

const inputElement = document.getElementById('usernameInput');console.log(inputElement.value); // 输出输入框的内容

文章推荐