uniapp 的input组件在@input事件中修改绑定值输入框不更新bug

最新推荐文章于 2025-04-18 14:09:32 发布

发狂精灵

最新推荐文章于 2025-04-18 14:09:32 发布

阅读量2.2k

点赞数 1

分类专栏： Uniapp 文章标签： uni-app bug javascript

本文链接：https://blog.youkuaiyun.com/fakuangjingling/article/details/132849260

版权

Uniapp 专栏收录该内容

5 篇文章

订阅专栏

文章讲述了在Vue中，如何使用$nextTick和setTimeout来确保在用户输入时，值被正确处理并实时更新视图。作者介绍了两种方法：一是利用$nextTick处理DOM更新，二是添加延迟的setTimeout来同步更新值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 //判断val 只能输入数字和小数点
getInput(val) {//input事件函数
   console.log("input事件");
  this.value=this.value.replace(/[^\d.]/g, "")
  console.log(this.value)
},

运行上面代码发现value的值改变了但是input中显示的内容未改变

解决方式

1.this.$nextTick()

 //判断val 只能输入数字和小数点
getInput(val) {//input事件函数
   console.log("input事件");
this.$nextTick(()=>{
  this.value=this.value.replace(/[^\d.]/g, "")
  console.log(this.value)
})

},

2.添加延迟settimout

 //判断val 只能输入数字和小数点
getInput(val) {//input事件函数
   console.log("input事件");

  setTimeout(()=>{
     this.value=this.value.replace(/[^\d.]/g, "")
    console.log(this.value)
   },0)
},