本来想用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”
