这是移动端使用的，
input type 为number 时 英文或中文都没有限制，而且maxlength不起作用，
input type 为tel 时 英文或中文也都没有限制，但maxlength有作用，所以用tel，
keyup 是为了过滤数字以外的字符。
请问大神这段代码还有没有优化的空间？
<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>
迷茫2017-07-05 11:01:49
phoneNumber 初始值应该是字符串的 ''，否则对一个可能为 null 的变量调用 replace 是不安全的。
var self = this 是不必要的。
handleFilterLetters 好长啊，改成 onKeyUp 不好读一点吗（
<input> 一行写的太长了，eslint-airbnb 的规则是
<input
v-model="phoneNumber"
placeholder="输入手机号"
type="tel"
maxlength="11"
@keyup="handleFilterLetters"
/>
怪我咯2017-07-05 11:01:49
楼上说的都对
题主还可以多注意一下 code style
比如：self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
写成self.phoneNumber = self.phoneNumber.replace(/[^\d]/g,'');
比较好
仅有的幸福2017-07-05 11:01:49
这里用的局部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, '')
}
}
})