当前位置：首页 > 前端教程

elementui获取input的值

2026-03-05 16:59:00前端教程

获取 ElementUI Input 值的方法

使用 v-model 双向绑定
在 Vue 中，通过 v-model 可以直接绑定 Input 的值到组件的 data 或 setup 中。这是最常用的方式：

elementui获取input的值

<template>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '' // 自动同步输入框的值
    }
  }
}
</script>

通过 ref 引用获取
如果需要手动操作 DOM 或获取 Input 实例，可以使用 ref：

elementui获取input的值

<template>
  <el-input ref="inputRef" placeholder="请输入内容"></el-input>
</template>

<script>
export default {
  methods: {
    getValue() {
      const value = this.$refs.inputRef.value;
      console.log(value);
    }
  }
}
</script>

监听 input 或 change 事件
通过事件监听实时获取输入值：

<template>
  <el-input 
    @input="handleInput" 
    @change="handleChange" 
    placeholder="请输入内容">
  </el-input>
</template>

<script>
export default {
  methods: {
    handleInput(value) {
      console.log('实时输入值:', value);
    },
    handleChange(value) {
      console.log('失焦后的值:', value);
    }
  }
}
</script>

使用表单验证时的值获取
若 Input 在 el-form 内，可通过表单的 model 获取：

<template>
  <el-form :model="form">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: ''
      }
    }
  }
}
</script>