這是移動端使用的，
input type 為number 時 英文或中文都沒有限制，而且maxlength不起作用，
input type 為tel 時 英文或中文也都沒有限制，但maxlength有作用，所以用tel，
keyup 是為了過濾數(shù)字以外的字符。
請問大神這段代碼還有沒有優(yōu)化的空間？
<input v-model="phoneNumber" placeholder="輸入手機號" type="tel" maxlength="11" @keyup="handleFilterLetters">
<script type="text/javascript">
vm = new Vue({
el: "#app",
data: {
phoneNumber: null,
},
methods: {
handleFilterLetters: function(){
var self = this;
self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
},
}
})
</script>
3
0
0
phoneNumber 初始值應該是字符串的 ''，否則對一個可能為 null 的變量調用 replace 是不安全的。
var self = this 是不必要的。
handleFilterLetters 好長啊，改成 onKeyUp 不好讀一點嗎（
<input> 一行寫的太長了，eslint-airbnb 的規(guī)則是
<input
v-model="phoneNumber"
placeholder="輸入手機號"
type="tel"
maxlength="11"
@keyup="handleFilterLetters"
/>
樓上說的都對
題主還可以多注意一下 code style
比如：self.phoneNumber=self.phoneNumber.replace(/[^d]/g,'');
寫成self.phoneNumber = self.phoneNumber.replace(/[^d]/g,'');
比較好
這里用的局部filter
如果想可復用程度高點，全局filter也可以的
<p id="app" >
<input :value="phone | num" @keyup="phoneChange" />
</p>var app = new Vue({
el: "#app",
data: { phone: "" },
methods: {
phoneChange(e) {
this.phone = e.target.value
this.$forceUpdate() // 這里必須有
}
},
filters: {
'num': function(value) {
return value.replace(/[^\d]/g, '')
}
}
})
