element-ui输入框的怎么获取change事件返回的值？

Posted 2023-03-16

1、首先第一步，这时候我们使用vue-cli脚手架工具创建一个vue项目，注意都是然后引入element-ui框架（不会的详情参考下面经验），详细目录文件如下图。

2、接着我们就要前往element-ui官网，然后就要找到输入框input组件，注意的是要看看有什么方法可以获取input的值，change事件可以实现这个功能，详细如下图。

3、接着就是要把element-ui输入框组件放到我们项目中，代码以及效果如下图。

4、然后就是要在输入框组件中绑定一个change事件（用法@change=""），这时候监听绑定v-model的值就可以了。

5、最后一步就是用命令行工具，然后运npm run dev，然后注意都是利用配置的地址打开网页，在输入框输入不同的内容都能监听到。

参考技术A

1、我们使用vue-cli脚手架工具创建一个vue项目，引入element-ui框架。

2、我们前往element-ui官网，找到输入框input组件，看看有什么方法可以获取input的值，change事件可以实现这个功能。

3、我们按照图示代码先把element-ui输入框组件放到我们项目中。

4、我们在输入框组件中绑定一个change事件（用法@change=""），监听绑定v-model的值就可以了。

5、利用命令行工具，运npm run dev，利用配置的地址打开网页，在输入框输入不同的内容都能监听到。

参考技术B

change()  // 目的是去掉输入框中的小数点
if (this.value)    

this.$nextTick(() =>     

this.value = parseInt(this.value);
)

1.<el-input v-model="value" v-on:change="change" type="number"></el-input>

export default
data()        

return           

value: ''

，
methods:
change(value)           

// 目的是去掉输入框中的小数点
if (this.value)           

this.value = parseInt(value);

2.首先el-input是一个组件，并不是input标签。而你的change事件监听的是el-input的整个组件。即图中的div元素。

要解决这个问题的方法就是原生的input，再加上el-ui的class：el-input__inner。