vue限制只能输入数字_vue的input中，如何限制只能输入number
本來想用watch觀察v-model的值，一旦不是數(shù)字，就讓新值等于舊值，后來發(fā)現(xiàn)不行。h5的type=”number”屬性在手機上無效。有什么比較好的方法嗎
<input v-model="num">
type=”tel”的作用是直接彈出數(shù)字鍵盤吧，這樣好像也不錯
不是推薦用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">
實現(xiàn)思路：就是不要用 v-model, 然后自己監(jiān)測值的變化，在監(jiān)測事件中進(jìn)行值的判斷。
參考： 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”
總結(jié)
以上是生活随笔為你收集整理的vue限制只能输入数字_vue的input中，如何限制只能输入number的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux共享内存示例,linux 进程
- 下一篇： 生物学专业_江南大学微生物学(发酵)20