vue限制只能输入数字_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,'');

}

}

}

})

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

<input v-model.number="age" type="number">

实现思路：就是不要用 v-model, 然后自己监测值的变化，在监测事件中进行值的判断。

参考： http://jsbin.com/nabafidapu/1…

如果是在移动端的话，可以这么做：

<input type="text" pattern="[0-9]*">

<input type="tel">

//<input v-model="num" v-number-only />

Vue.directive('numberOnly', {

bind: function () {

this.handler = function () {

this.el.value = this.el.value.replace(/\D+/, '')

}.bind(this)

this.el.addEventListener('input', this.handler)

},

unbind: function () {

this.el.removeEventListener('input', this.handler)

}

})

input type=”tel”