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

總結

以上是生活随笔為你收集整理的vue限制只能输入数字_vue的input中，如何限制只能输入number的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。