问答

el-input显示值和value值不一样?

作者:admin 2021-04-21 我要评论

el-input显示值和value值不一样 ### 在vue中的事件是经过封装的, @input 封装函数的参数$event就是绑定数据的数值,就像下面这样 对于 @input.native 封装函数...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

el-input显示值和value值不一样
image.png

###

在vue中的事件是经过封装的,@input封装函数的参数$event就是绑定数据的数值,就像下面这样

image.png

对于@input.native封装函数的参数$event就是原生事件,就像下面这样

image.png

对于你的写法,函数中的value指向是环境中的value变量,如果环境中不存在该变量会抛出错误的,而你改变的也是环境中的变量value。

所以你可以用下面几种方法修改
1、使用@input直接修改accountSetting.amount

<el-input v-model="accountSetting.amount" 
    @input="accountSetting.amount = $event.replace(/[^\d]/g, '')"></el-input>

或者

<el-input v-model="accountSetting.amount" 
    @input="accountSetting.amount = accountSetting.amount.replace(/[^\d]/g, '')"></el-input>

2、使用@input.native直接修改accountSetting.amount

<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = $event.target.value.replace(/[^\d]/g, '')"></el-input>

或者

<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = accountSetting.amount.replace(/[^\d]/g, '')"></el-input>
<el-input v-model="accountSetting.amount" 
    @input.native="accountSetting.amount = $event.target.value.replace(/[^\d]/g, '')"></el-input>

3、把你的input事件去掉,改为监听accountSetting.amount,在回调中处理数据,再重新赋值回去,vue2的写法:

watch:{
    accountSetting.amount: function(value){
        this.accountSetting.amount = value.replace(/[^\d]/g, '')
    }
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • el-input显示值和value值不一样?

    el-input显示值和value值不一样?

  • 给body添加全屏背景图(backgroung-size

    给body添加全屏背景图(backgroung-size

  • C语言链队销毁问题(求求帮帮孩子)

    C语言链队销毁问题(求求帮帮孩子)

  • 请问安卓如何监听requestWindowFeature

    请问安卓如何监听requestWindowFeature

腾讯云代理商
海外云服务器