vue.js - vue的input中，如何限制只能输入number

问题描述

问 题

本来想用watch观察v-model的值，一旦不是数字，就让新值等于旧值，后来发现不行。h5的type="number"属性在手机上无效。有什么比较好的方法吗

<input v-model="num">

type="tel"的作用是直接弹出数字键盘吧，这样好像也不错

解决方案

不是推荐用computed么？

        <div id="demo">
            <input v-model="inpNum"/>
            <p>
                {{inpNum}}
            </p>
        </div>

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

不过如果你说的是在输入过程中就改。。。那样用户体验未免有点。。。。

这篇关于vue.js - vue的input中，如何限制只能输入number的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！