获取el-input的值
时间: 2023-10-07 12:13:47 浏览: 614
要获取 `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` 方法来获取输入框的值,并输出到控制台中。你可以根据实际需求修改代码来适应你的情况。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)