获取el-input的值
时间: 2023-10-07 20:13:47 浏览: 787
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
要获取 `el-input` 的值,你可以通过以下步骤进行操作:
1. 先给 `el-input` 组件添加一个 `ref` 属性,例如:`<el-input ref="myInput"></el-input>`。这样可以在 Vue 实例中引用这个组件。
2. 在 Vue 实例的方法中,使用 `$refs` 来访问 `el-input` 组件。例如,你可以在方法中使用 `this.$refs.myInput` 来获取到 `el-input` 组件的引用。
3. 通过 `value` 属性获取 `el-input` 的值。例如,你可以使用 `this.$refs.myInput.value` 来获取到 `el-input` 中的值。
下面是一个示例代码:
```html
<template>
<div>
<el-input ref="myInput" v-model="inputValue"></el-input>
<button @click="getValue">获取值</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
getValue() {
const value = this.$refs.myInput.value;
console.log(value);
}
}
}
</script>
```
在上述示例中,我们使用了 `v-model` 来绑定输入框的值到 `inputValue` 变量上,并且在点击按钮时调用 `getValue` 方法来获取输入框的值,并输出到控制台中。你可以根据实际需求修改代码来适应你的情况。
阅读全文