vue中input按照一定的规则输入，不符合规则输入不进

Android你好安卓

于 2018-08-24 16:55:33 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue input

本文链接：https://blog.youkuaiyun.com/cao185493676/article/details/82021452

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Vue框架中如何使用input事件监听输入变化，并通过正则表达式检查输入是否符合特定规则。当输入不符合规则时，文章提供了一个解决方案，即使用setTimeout延迟函数将输入值恢复为上一个有效值，确保了数据的有效性和用户界面的一致性。

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

1.绑定input事件监听输入值的变化：

  <input  v-model="inputKey"  @input="change"></input>

2.修改不符合规则的值：

 change(res) {
     if(res==""){
           缓存值= res;
        }else if (/^[a-zA-Z\$_][a-zA-Z\d_]*$/.test(res) ) {
            //符合规则缓存起来
            缓存值 = res;
        } else {
            //不加Timeout this.inputKey的值能改变，但是input显示值没有改变
          setTimeout(()=>{
            //不符合规则，把上一次缓存起来的值重新赋给input双向绑定的变量
            this.inputKey=缓存值;
          },0)
          
        }
    }

不加timeout this.inputKey能改变但是双向绑定的（v-modle）input显示值并未改变，原因未知。