vue中限制input只能输入数字-示例

若茶先森

于 2018-05-23 22:56:09 发布

阅读量5.9w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js 文章标签： input限制输入数字

本文链接：https://blog.youkuaiyun.com/zpcqdkf/article/details/80427737

vue-js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了两种使用Vue实现仅允许输入数字的方法。第一种方法通过Vue的计算属性拦截非数字字符，第二种方法则是在input事件中进行过滤。

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

方法1   new Vue({
    el:'#demo',
    data:{
        oldNum:0    
    },
    computed:{
        inpNum:{
            get:function(){
                return this.oldNum;
            
            },
            set:function(newValue){
                this.oldNum=newValue.replace(/[^\d]/g,'');
            }
        }
    }
    
})方法二：

<input type='text' @input="handleInput" :value="val"/>

handleInput(e){
this.val=e.target.value.replace(/[^\d]/g,'');
}