element-ui输入框的怎么获取change事件返回的值?
1、首先第一步,这时候我们使用vue-cli脚手架工具创建一个vue项目,注意都是然后引入element-ui框架(不会的详情参考下面经验),详细目录文件如下图。
2、接着我们就要前往element-ui官网,然后就要找到输入框input组件,注意的是要看看有什么方法可以获取input的值,change事件可以实现这个功能,详细如下图。
3、接着就是要把element-ui输入框组件放到我们项目中,代码以及效果如下图。
4、然后就是要在输入框组件中绑定一个change事件(用法@change=""),这时候监听绑定v-model的值就可以了。
5、最后一步就是用命令行工具,然后运npm run dev,然后注意都是利用配置的地址打开网页,在输入框输入不同的内容都能监听到。
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。